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Capítulo 1: Arte lineal 


Realiza líneas de arte suaves y aprende sobre formas, líneas y curvas. 


Capítulo 2: Suavizado 


Suaviza tus contornos y haz que tus sombras y curvas se vean más suaves. 


Capítulo 3: Color 


Cree y ajuste paletas de colores adecuadas para sprites y fondos. 


Capítulo 4: Legibilidad 


Mejorando la claridad del sprite, grande o pequeño. 


Capítulo 5: Difuminado 


Crea diferentes degradados principalmente para fondos. 


Capítulo 6: Perspectivas del juego 


Cree entornos y personajes isométricos y aprenda sobre otras perspectivas fijas de videojuegos. 


Capítulo 7: Limpieza 


Refine su trabajo de píxeles y agregue los toques finales. 


Capítulo 8: Subpixelado 


Vaya más allá de su único píxel y dé vida a su animación. 


Capítulo 9: Animación 
El último paso para dar vida a tus personajes y entornos. 


Epílogo 


Epílogo, Bibliografía, Artistas invitados. 


Prólogo 
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¿Qué programas uso? 


Puede seguir usando el software que ya conoce o cambiar a uno nuevo. Algunos programas hacen 
más que pixel art, otros no.Al final, no importa cuán avanzada o sofisticada sea su tecnología. 


¡Incluso MS Paint hace el truco! Chequepágina 14para algunos ejemplos de software. 
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¿Por qué el pixel art es diferente de otros pixeles? tardiozArte? 


En pixel art, tienes el control total y puedes manipular cada píxel tú mismo. Las herramientas avanzadasno 
Hacer el trabajo. Por supuesto, eso hace que su obra de arte sea más nítida porque no tiene el desenfoque suave 
de los pinceles. Sin embargo, el pixel art no se trata solo de las herramientas. Aprender técnicas es igualmente 


importante para obtener buenos resultados y trabajar más rápido. 


Ustedescontrolar los píxeles. Las 


herramientas no te controlan. A z 
Arte sin píxeles: 


No significa que tengas que colocar No requiere que hagas mucho zoom. 


cada píxel como un ladrillo. No requiere precisión de píxeles. 


Utiliza pinceladas y presión de pluma. 


Hay atajos. ¡No te preocupes! 


El pixel art nació de las limitaciones. 


Es por eso que muchas técnicas manuales todavía se usan hoy en día. 


El progreso tecnológico brindó nuevas posibilidades en los juegos 2D: imágenes y fotografías digitalizadas, 
modelos 3D renderizados previamente, video de movimiento completo y mucho más. Una vez que los sprites 
dejaron de editarse a nivel de píxeles, ya no se consideraron pixel art.Todavía son objetos de sprite en la 


pantalla, pero no el tradicionalpixel-sprites hechos a mano que conocemos. 


Arte sin píxeles Oekakioarte binario Arte de pixel 


El pixel art a menudo se confunde con otros medios artísticos como Oekaki o Binary art. Eso es porque a 
menudo usan gráficos con alias: arte hecho con herramientas que no suavizan. Los pinceles regulares 


suavizan las líneas. El arte con alias mantiene todo píxel y nítido. 


Digital art 


Mixed medium Aliased art 


Oekaki Pixel art 


Este diagrama es un resumen. Para obtener más información, consulte las herramientas en la página... 


Entonces, ¿por dónde empiezo? 


Existenmúltiples formaspara comenzar. Comparémoslo con algo más familiar: ¡dibujar y 


pintar! ¡Los métodos no son tan diferentes del pixel art! Verás. 


Bosquejo Arte lineal 


Sombrear, limpiar 
& ¡completo! 


Cambiar el tamaño de un boceto grande. 


> 


formas de bloque Refinar 


Puede comenzar de varias maneras y tomar diferentes caminos. Incluso puedes mezclar caminos.Si ya 
haces ilustraciones, ¡apégate a tu método preferido!Si te sientes aventurero, prueba algo nuevo. 


Sin embargo, el pixel art suele ser de una sola capa. 


Si no se siente cómodo trabajando en una sola capa, no se preocupe; aún puede usar capas, pero asegúrese de 
combinarlas para no volverse demasiado dependiente. Especialmente con la animación, tener capas te dificultará 
más que nada. Si creas escenas completas o capturas de pantalla de juegos simulados, ¡aunque las capas son 


necesarias! Como resultado, esto acerca el pixel art a las obras de arte más tradicionales. 


El pixel art es como la escultura en 2D. 


¡Empiezas con una base, luego cincelas y agregas píxeles! 


Aquí hay algunos ejemplos de las múltiples formas de hacer tus sprites/pixelart. 


por Michafrar 


Artista invitado: Anubis Jr. 


herramientas de ferreteria 


¡Tanto el mouse como la tableta están perfectamente bien! 


¡OK! 


Un mouse es bueno con los clics. 
Más difícil de dibujar, pero ofrece 
precisión de clic. Bueno para 


limpieza y toques finales. 


¡OK! 


Una Tablet es buena con trazos. Más difícil 
de hacer clic o tocar constantemente, 
pero más fácil para el control intuitivo. 


Bueno para el boceto/comienzos. 


No importa lo que uses. Recuerda el dicho: 


“No se trata de las herramientas. Es cómo los usas” 


Recuerda: ¡tu teclado también es una poderosa herramienta para el arte! 


Puede usar métodos abreviados de teclado para acelerar el 
proceso y pasar de un cuadro de animación a otro. También 
puede usar botones adicionales en su mouse o tableta, si los 


tienen. A veces, incluso puedes crear tus propios atajos nuevos. 


Apéguese a las herramientas que le permiten trabajar de manera más eficiente y rápida. 
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Hardware de la “vieja escuela” 


Aquí hay algunos ejemplos de cómo se hicieron los sprites en los años 80 y 


90. No son tan diferentes del hardware actual, ¡solo más arcaicos! 


Los primeros desarrolladores de videojuegos usaban tecnología 
especial, como tabletas con un mouse que tenía una cruz. La 
tableta estaba calibrada para la pantalla, a diferencia de un mouse 
normal. Estos dispositivos fueron llamadosdigitalizadoresy el 


ratón se llamabadisco digitalizador. 


Los sprites se esbozaron en papel, se colocaron sobre el 


digitalizador y luego se trazaron con el disco. 


Los artistas de Capcom dibujaron marcos en papel cuadriculado y los pixelaron con digitalizadores. 


Arte de Felicia de Akira "Akiman" Yasuda presentado en Darkstalkers (1994). 


A | 


( ea Damer SYSTEM m 


Imágenes del desarrollo de Golden Axe en Mega Drive (1989) 
de la Revista Francesa “MegaForce #4” Enero-Febrero 1992. 
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Otro periférico era un digitalizador conectado a un 
pluma ligera: un lápiz de pantalla utilizado para tocar 
la superficie de las pantallas para reconocer los ejes X e 


Y del monitor. 


Se pueden considerar las precursoras de las tabletas 
LCD integradas de la actualidad.,como el Wacom 
Cintiq, que le permite dibujar directamente en la 


pantalla. 


Otros desarrolladores dibujaron directamente en computadoras 
con un mouse y teclado normales. Algunos artistas de píxeles todavía 
usan esta configuración. Estas imágenes son de un documental que 


presentaZona Comix(1993-1995) con el animador Dean Ruggles. 


Vídeo completo: youtu.be/-M8RIc6Ek0Q 


No se requiere una configuración de monitor dual ya que las computadoras modernas tienen altas resoluciones. 


¡Sin embargo, tener un segundo monitor es extremadamente útil! 


Capturas de pantalla de un comercial promocional de 1995 para Furia fatal 3CD de Neo Geo (Japón). 


e Structural Diagram of Character Development Tool 


*], RGB 21-pin monitor 


9. Art Box (Character development unit) 


/ 


. SCSI hard drive 


* 3. EP ROM writer 


* 4, Scanner 


Del folleto "Neo-Geo Hardware Specification", página 93, publicado por SNK Playmore Corporation 
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Programas de software 


Como se mencionó previamente, tus herramientas no te definirán como artista. Estos programas están ahí para ayudar a que el 


proceso de pixel art sea más fácil para que puedas mejorar tus habilidades. Cada programa enumerado a continuación ofrece sus 


propios beneficios únicos y es posible que encuentre un programa que se adapte a su proceso más que otros. 


¡Es importante que los pruebe usted mismo y vea lo que disfruta! 


Programas especiales de pixel ar 


Galeria de gráficos 


Precio: 1,995 JPY / $20 


Versión gratuita disponible pero sin gifs. 


Esta poderosa herramienta de píxeles es adecuada para animación 
y pixelart. Con herramientas compatibles con gamedev, como 
conjuntos de mosaicos, opciones de exportación y editores de 
paletas; este programa es bastante popular entre los artistas de 
píxeles. El diseño personalizable y las teclas de acceso rápido lo 


convierten en un software muy versátil. Desafortunadamente, la 


línea de tiempo es demasiado simple para hacer escenas completas. 


También es ideal para artistas binarios con una amplia gama de 
pinceles personalizables. ¡Este programa japonés está traducido y 
es bastante barato también! Asegúrate de probar la versión 


gratuita. 


Microsoft Paint XP/Vista 


Precio: Gratis 


Esta versión no está preinstalada en win. 7/8/10 


La herramienta que muchos principiantes y maestros han 
utilizado en las últimas décadas. Asegúrese de utilizar la 
versión de Windows XP o Windows Vista de Paint. Todas las 
versiones posteriores a Windows 7 cuentan con herramientas 


que no son pixelart que no le permiten crear un pixelart limpio. 


Este software solo tiene lo mínimo, pero a veces, eso es 
todo lo que necesitas. ¡La pintura es genial para comenzar 


tu aventura de píxeles! 
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por Michafrar 


aseprita 
Precio: $10 


Versión gratuita disponible pero funciones limitadas. 


¡Este software pixelart desarrollado indie siempre está lleno 
de sorpresas! Con actualizaciones frecuentes 
aproximadamente cada mes, espere que este programa se 
vuelva bastante poderoso. Es barato, tiene una línea de 
tiempo de animación intuitiva cercana a programas como 
Adobe Flash. 


Puede editar y cargar colores fácilmente e incluso 
acceder a paletas desde consolas retro. 
Desafortunadamente, la interfaz de usuario y el diseño son de baja 
resolución y están pixelados, pero es posible que las actualizaciones 


futuras agreguen una apariencia diferente. 


Promoción 
Precio: $78 


Versión gratuita disponible pero funciones limitadas. 


Esta herramienta ha ganado popularidad tras el éxito 
del juego independiente “Shovel Knight” de Yacht Club 
Games. Este software es una gran manera de animar 
sprites. Cuenta con una herramienta de piel de cebolla 
avanzada y le permite acercar hasta un 5000%. ¡Es 
bastante fácil de conectar y le permite personalizar el 
diseño! El precio es un poco más alto que el del otro 
software barato, pero esté atento a las ventas de vez 
en cuando. 


programas generales de arte 


Herramienta de pintura SAI 


Precio: 5400 yenes / 50 dólares Prueba 


gratuita de 30 días disponible 


Este software combina la capacidad de crear imágenes 
pixeladas y no pixeladas. Sus características clave incluyen 
una opción de cambio de tono que permite un mayor 
control del color que los programas orientados a píxeles. 
También cuenta con la capacidad de hacer líneas suaves 
de 1 px con las opciones de lápiz y estabilidad heredadas, 
junto con una herramienta de varita precisa. El programa 


también es fácil de usar para tabletas. 


© antihero.ase - Aseprite v1.1.0.1 - o x 
File Edit Sprite Layer Frame Select Wiew Help 
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Caballero de la pala (PC) 


MeO E Caws Layerd) Selecon) Fite) view () Window (4) Others) 
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Memory Ussage: 34% (Use S096)Paxa0ssie) i Cl SFC a 


Artista invitado: cyanatar 
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CAÑUTILLO 


Precio: Gratis 


Una aplicación de software de código abierto 


GIMP es un software de dibujo gratuito que también tiene 
la capacidad de hacer pixel art. Esto inmediatamente lo 
hace más accesible que los programas enumerados 
anteriormente, sin embargo, aunque es gratuito, no tiene 


una interfaz intuitiva para pixel-art. 


El programa incluye muchas herramientas útiles, incluidas 


cuadrículas personalizables y opciones de transparencia. 
También tiene una herramienta de texto. Tener la opción de por Michafrar 
tener amplias configuraciones para satisfacer sus 

necesidades será conveniente o 


abrumador, dependiendo de sus preferencias. 


x  Untitled-2 @ 400% (Layer 1, RGB/8) * x 


Adobe Photoshop “Te om TESTS 


Precio: $699+ 
¡Programa extremadamente caro! 


Photoshop es bien conocido como el software estándar 
para el arte digital, además de ser el más caro. Hay 
más opciones amigables con la billetera gracias a las 
suscripciones a la nube de Adobe, pero si tiene un 
presupuesto ajustado, todavía es bastante costoso. 


Si puede pagarlo, el programa realmente hace todo lo 
que pueda necesitar, incluido el trabajo de píxeles. Puede 
carecer de la precisión del software dedicado, por lo que 
si desea configurar herramientas de pixel art en el 
programa, es posible que deba leer tutoriales específicos 
para aprovecharlo al máximo. 


Artista invitado: cyanatar 


dieciséis 


Herramientas de software 


Independientemente del software, necesitarápor lo menosestos4 herramientas. 


Estos son los mínimos necesarios para hacer pixelart. 


Herramienta Lápiz 


Herramienta más básica. Algunos programas tienen un pincel. te 


da unherramienta de 1 píxelde píxeles nítidos y limpios. 


9) a ae AS 


cuentagotas 


Absorbe un color. A veces asignado al clic derecho. 
Te permiterecoger coloresy hacer paletas. 


1 2 P 4 ~ £2 FA 


Borrador 
Borra tus errores. Algunos programas no lo incluyen porque 
simplemente puedeborrar con blancoo transparencia. 


Cubeta 


Hace tu vida más fácil. Esollena un area vaciacon 1 color sólido. 


¡Cuidado con los huecos! O llenará toda la pantalla. 


$) AACA & 
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Algunos programas no incluyen goma de borrar y agrupan el cuentagotas con el pincel. 


¡Eso te da 2 herramientas que combinan el poder de 4! 


Otras herramientas imprescindibles: 


9 
d , 


\ 
\ 
p 
\ - o 


DO” - 
herramienta de línea 


Herramienta Recolorear 


=>» O 
 — 


Herramienta Círculo 


Herramienta de selección 


Usar y editar manualmente: 


herramienta de rotación Ajustes de color 


Evitar: 


Gradientes borrosos 


cepillos 


Difuminar 


¿Por qué evitar las herramientas automáticas? Porque el artista no puede predecir cómo resultará el resultado. 


Recuerda: Pixel art se trata de tener un 100 % de control sobre lo que haces. 
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¿Qué tamaño de lienzo? 


“¿De qué tamaño hago mis sprites y fondos?” es una pregunta común. Los gráficos de 
computadora antiguos tenían una resolución baja, por lo que el pixel art suele ser 


pequeño. Al hacer pixel art, tendrás que decidir el tamaño del lienzo desde el principio. 


Para obtener más información sobre los tamaños de sprites, leaCapítulo 4: Legibilidad 


“Quiero hacer obras de arte y mostrarla: 


Dibuja lo grande o pequeño que quieras que sea tu obra de arte o animación. Un 


buen lienzo tiende a pegarse bajo resoluciones de videojuegos pixelados. 


a 5 ES Fr v 5 B a FE = = E a yz A 
SBaeaseeenepee@peaeeeaeaeenaes 
AAA... 


Nintendo DS Mast ' pectrur Super Nintendo 


Game Boy P 


Megadrive Genèsi Maste | MSX 
[Nintendo DS R MS DOSE NES | NeoGeo  PZXSpectrumisuper Nintendo 
ponen dd 256x192 240x160 244x144 160x144 94x64 84x48 32x32 320x240 256x240 320x224 


Asegúrate de verificar qué relación hay entre tu sprite y el lienzo. 
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Metroid II: El retorno de Samus(Gameboy) hcomo una proporción GRANDE de sprite a lienzopara un personaje jugable. 


El sprite es 1:24, alrededor del 4% de la pantalla. No es muy adecuado para maniobrar en nivel. 


E 
ENERGY om 015 


Súper Metroid (Super NintendoJtiene una proporción de sprites a lienzo BAJApara un personaje jugable. 


El sprite es 1:38, alrededor del 2,5% de la pantalla. Permite que el jugador vea más de su entorno. 


Historia de la cueva/Doukutsu Monagatar{ORDENADOR PERSONAL)tiene una proporción PEQUEÑA de sprite a lienzopara un personaje jugable. El 


sprite es 1:300, alrededor del 0,33% de la pantalla. Los personajes siguen siendo visibles pero minimalistas debido a su pequeño tamaño. 


Esto puede sonar obvio para muchos artistas,pero cuando cambias el tamaño SIEMPRE mantente en NÚMEROS ENTEROS. 


05x 1x 1,25x 
50% 100% 125% 


Original 


Puede cambiar el tamaño de los sprites a cualquier porcentaje, PERO tendrá 


que corregirlos manualmente para mantener el tamaño 1x (100%). 


Aún más importante, NUNCA JAMASmezclar diferentes proporciones de píxeles. 


1953 1466023253014? 


Tiempo de Aventura: Héroe de medio minuto (PSP) 
EtDBIDK! (Varias plataformas) 


Avanzando... 


Este breve prólogo solo estaba arañando la superficie. 


sobre cómo UVdspuede hacer sprites. 


¡Al final, hay un método para cada tipo de artista! 
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Introducción 


Desafío de cartas Tekken (WonderSwan) 


El arte lineal es elbase de tu sprite 
jindependientemente de si comienza con formas, 
bocetos sueltos o sin líneas de arte! A menudo se 


aplicará en algún momento del proceso. 


La consistencia es esencial. 
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Hace que los sprites sean más legibles y atractivos. 


¿Prefieres líneas más gruesas? Asegúrate de mantener 
el arte lineal limpio y fácil de seguir. algunas lineas 
sin embargopoderser más delgado que el resto 


del dibujo si el estilo lo requiere 


lineas finasson mejores 


para áreas pequeñas. 


Abajo de izquierda a derecha: SNK v C Card Fighter's Clash (Neo Geo) 
Pokémon Pinball RS (GBA) 


0998 


¡Los sprites suelen ser pequeños gráficos! Como resultado, notarás que en los juegos... 


La mayoría de los pixel art tienen líneas de arte de 1px. 
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por Michafrar 


Líneas y curvas 


¿Alguna vez notó que al dibujar una línea o curva de píxeles en 1 trazo, no se ve tan suave como desea? 


Eso es debido ajaggies. Estas son partes irregulares de una línea o curva. 


AAA 


CC E 


proceso 


il il 
os al 


jOh, no! Mucho 
¡mejor! 


¿La clave para recordar con jaggies? No rodees 


una fila de píxeles con otros más grandes. 


Y -3-2-1=1=1-2=1-3=2-3-8 Y -3-2-1-1-1-1-1-2-3-4 -8 
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Arte de pixelamalíneas que tienen las mismas “escaleras”, escaleras con el 


mismo número de píxeles en cada paso... ¡Simplemente se ve más suave! 


¡Cuanto más empinada sea la línea, más grande será el 'paso"! 


'ALERAS. Si tiene escaleras de DOS, no incluya UNO. 


Mantenga su escalera igual y evite las irregularidades. 


No hay necesidad de volver a dibujar las 
líneas o CTRL+Z cada vez. 


Recuerda que siempre puedes utilizar la 
jaggy herramienta de selección. También puede 
cincelar píxeles. ¡Elimine o agregue píxeles para 


obtener líneas bonitas! 


28) 


Incluso cuando no tienes líneas, cualquier forma dentro de tu pixel art tiene un borde. 


Artista invitado: Anubis-works 


Cuando 2 formas de colores se tocan, crean una línea.Entonces, 
incluso el sombreado de celdas crea "líneas".¡En superficies lisas, su 


sombreado tampoco debería tener irregularidades! 


Cabeza de atún de The Guided Fate Paradox (PS3) 


Gráficos sin arte lineal, comoMa/diciones y caos(PC/PS4), todavía tienen pixelart de aspecto limpio. 


Es bastante efectivo para los fondos. Para ver más ejemplos, consultepágina 30. 


No hay problema 


Como he descrito, cincelar tus líneas es mucho más natural que ser perfeccionista. 


¡Esto funciona para todos los problemas, y puedes ver a continuación algunos ejemplos que hice para enfatizar eso! 


a ES Sd 
Originales E g G Ly a 


Otra forma de ver jaggies es imaginar tu pixelart comolineas vectoriales! 


Entonces, si no está seguro, dibuje sobre él y verá los errores. 


CIEL 


Dentado... 


LALIC 


¡Reparado! 


Continuous Paint de Freehand trace algorithm | 


 Pivel-perfect 


Pixel perfect Drawing 


movimiento profesional aseprita 29 


El contorno es un atributo principal que define el estilo de un sprite. 


Es posible que haya notado que pixelart viene en muchas formas y formas. ¡Como cualquier arte! 


Estos son los tipos de esquemas que identifico: 


Los sprites sin contorno son píxeles con 


gráficos en forma de vector. 


Usualmente estáncolores sólidos 
y ocasionalmente tienen sombras 


y contornos rotos. 


No se deje engañar; incluso sin 
líneas,todavía necesitas limpiar 


jaggies!o siento...) 
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[14 Traducido del inglés al español - www.onlinedoctranslator.com 


Los píxeles en línea negros son sprites conarte de línea 


negraEso vadentro de los sprites también. 


Esto fue muy efectivo en elera NEScomo una forma 
de eludir las limitaciones. Hoy en día, hace que los 


sprites sean bastante fangosos. 


¡Bueno, no TODOS los sprites... ; | | 
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contorno 


Con contorno negro,solo el contorno tiene un contorno 
negro,pero elel interior está completamente coloreadocon 
poco o nada de negro. Ayuda a que tu sprite se destaque de 


fondos y aspecto limpio! 


Es el estilo que se usa comúnmente hoy en día con los sprites, 


y es muy popular entre los modernosjuegos de mano. 
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De colores 


El contorno se colorea de acuerdo con el color que 
rodea. Cada parte de un objeto tiene su propio 


contorno de color. 


El contorno de un bloque será el tono más 


oscuro del bloque interior.. 


contorno selectivo 


¡El contorno selectivo es un arte lineal sombreado con una fuente de luz! es lo mas 


tipo común de contorno en pixel art, y funciona muy bien con fondos. 


Metroid: Misión Cero (GBA) 


"E 
a iS 


Se integra perfectamente con el entorno. 


34 Fondo claro u oscuro, ¡no importa! 


Ejemplo de caso: sprites Pokém 


Puede ser difícil ver el contorno 
completamente sin hacer zoom o 
con el color interior.Quitemos todo 


menos el contorno.. 


¡Es súper efectivo! 


Ahora es obvio que: 


1) La línea de arte está claramente sombreada. 


2) La fuente de luz es visible. 


Los sprites de Pokémon desde Gameboy 
Advance hasta Nintendo DS cuentan con 
un esquema selectivo. Son atemporales. 


El contorno colorido los hace geniales. 


Los sprites de Pokémon son un excelente 


ejemplo de contorno selectivo.. 


Ve a estudiarlos. 
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Conclusión 


He aquí un resumen de los diferentes tipos de esquemas, diferentes contornos pueden completamente 


cambiar el estilo de un sprite! Independientemente de la técnica que utilice, 


el arte lineal se aplicará en cualquier etapa del proceso. 


Tf 


Comida para el pensamiento Tipos de contornos 
Introducción sin contorno 
Líneas y Curvas Negro en línea 
Las líneas están en todas partes contorno negro 


contornos coloreados 


Contornos selectivos 
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Suavizado 


Una imagen vale mas que mil palabras. Entonces para el 


Lo & 


Aliased Anti-aliased 


Anti-aliasing te ayuda a suavizar los bordes . Presta atención a 
dónde están estos pequeños bloques: generalmente zonas oscuras con zonas claras. A veces 
también se encuentran entre 2 tonos, reflejos de las sombras! 


Starfox 2 (SNES, inédito) 
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¿AAA o no a AA? 


uno no es mejor que el otro, pero el suavizado es demayorimportancia para el pixelart. ¿Debo 


usar suavizado o no? ¿Vale la pena mi tiempo?Hagamos un estudio caso por caso. 


con suavizado sin suavizado 


Un pixel art personalizado de Metaknight de Nintendo. Originalmente creé esto con suavizado. Sin 
embargo, al eliminar todo el suavizado, la imagen no perdió mucha calidad. Es difícil notar la diferencia. 


AA es solo la guinda del pastel aquí. 


gráficos originales suavizado adicional 


Tres duendes degarabatos(NDS). El canguro en el original ya tenía suavizado. ¿Puede usted 
decir la diferencia? Apenas se nota. Estos sprites no se benefician del suavizado. El estilo del 


juego es relativamente simple, por lo que el suavizado apenas es necesario. 
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gráficos originales sin suavizado 


Un sprite del Rey Dedede dekirby Super Star U/traNDS). Aquí es donde la falta de suavizado se vuelve 
dolorosamente perceptible. Este estilo tiene que ver con formas suaves y suaves.Sin suavizado, se 


pierden todos los detalles. 


gráficos originales sin suavizado 


Un desconocido dePokémon CristaKGBC). El sprite sin AA se siente bloqueado. Los gráficos originales 
tenían una gran cantidad de AA. En el juego, el sprite se mostraba sobre un fondo blanco.Dado que los 
sprites podían tener un total de 4 colores, maximizaron AA. El sprite negro sin AA se siente duro 


sobre un fondo blanco puro. 


gráficos originales sin suavizado 


Retrato de Furia fatal AGB). Eliminar el AA hace que el sprite sea más legible, pero tiene un costo: hay menos 


detalles.Para aprovechar al máximo una paleta de gameboy, es mejor agregar AA. 
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Gee 


graficos originales suavizado 


Objetos de Ritmo Cielo/Paraíso(NDS). La mayoría de los gráficos de este juego tienen alias, son nítidos y 


dentados. Esto se hizo para imitar el estilo artístico de Ko Takeuchi. Sin embargo, al agregar un ligero AA, los 


sprites tienen un aspecto más suave. 


L: Gráficos originales R: Suavizado adicional 


Retratos de Metal Gear: Fantasma de BabelGBC). Aquí, la diferencia solo se nota cuando se acerca el zoom. 
Cuando estos retratos se muestran a una resolución pequeña, apenas se puede notar la diferencia.Las formas 


son lo suficientemente limpias como para tener un suavizado mínimo. 


gráficos originales sin suavizado 


Fuka Kazamatsuri de Disgaea 4PS3). Estos sprites son dibujos reducidos que han sido retocados por 
artistas de píxeles. Si elimina todo el AA, hay poca diferencia. Los colores con bajo contraste no 
necesitan mucho AA. No obstante, dado que esto se mostró en resolución HD en una Playstation 3, el 


suavizado suave es imprescindible. 


gráficos originales sin suavizado 


Guerras avanzadas(GBA). Al igual que con Disgaea, este arte fue reducido y retocado manualmente para 
adaptarse a sus limitaciones.Usaron AA para preservar el detalle del arte original..Sin él, es solo un 


desastre pixelado. 


gráficos originales con suavizado 


SMWZ2: La isla de Yoshi (SNES). ¡Ay! El estilo artístico del juego claramente buscaba una apariencia de crayón. 


Por lo tanto, estos sprites deben ser nítidos y nítidos.Anti-aliasing lo empeora. 


Conclusión 


Suavizado 
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Escritor invitado: 


— A | 
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TuyoART.Tumblr.com 


Claridad 

Los personajes, las caras y los ojos 
suelen llamar la atención de las 
personas. Lo mejor es hacerlos claros, 


reconocibles y fáciles de leer. 


Alto contraste 
Si tiene 2 colores muy contrastantes, 
intente mezclarlos usando algunos 


píxeles intermedios. 


El trabajo de Temmie se centra en un trabajo de línea 
suave y fácil de leer. Aunque a primera vista parece 
haber poco suavizado, lo usa de manera bastante 


estratégica. 


Anti-Aliasing se utiliza para 


Detalle 

Esta área contiene muchas curvas 
pequeñas. Las curvas más pequeñas 
suelen ser más irregulares. Requiere más 


AA que las curvas más grandes. 


Grosor de línea 
El suavizado se usa para agregar o 


eliminar algo de grosor de línea. Al 


agregar AA, puede hacer que las cosas se 


vean más gruesas o más delgadas. 


Cómo aplicar 


AA simplemente coloca píxeles en los rincones pequeños para suavizar las líneas y las formas. 


es comocojines en un sofá! 


Li, 


( 
“Tanks for Filling He gap 


Estos ejemplos deberían ayudarlo a identificar el AA bueno del AA malo. 


Van desde lo simple hasta lo complejo. 


+ AA 
ve Eel ica 
a h 


¿Cuántos bloques agrego? 


Aproximadamente la mitad de la longitud de la línea. Demasiado poco es mejor que Recomiendo una mezcla 
demasiado. de 1 y 2 tonos. Ve a 

e A 2 

¿Cuántos tonos uso? buscar algunos de tus 


Uno para empezar a practicar. Dos para 


sprites favoritos que 


obtener resultados más suaves. 
tener AA. Prueba a ver 
Tres si tienes suficientes colores y te sientes seguro. 


cómo lo hacen. Ver 
Nota: demasiado AA difumina la línea entre pixel art y vector art 


lo que le convenga 


¿Qué esquinas relleno? 


¡Las siguientes páginas le mostrarán algunas técnicas para ayudarle! 
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A continuación se muestran algunos ejemplos de . Son raros para pequeños sprites, pero son más comunes 


con pixel art más grande. Si no está satisfecho con el aspecto con alias, aún puede agregar AA. 


Darkstalkers 3 (Arcade/PS1) 


a 
. AA más largo no lo essiemprenecesario. Puedes | | 
E 
Z . a E 
tener bloques más cortos. ¡Depende completamente de ti! a” 


Aunque los dibujos no son pixel art, técnicamente están hechos de píxeles en 
una pantalla. El término técnico para esto esImagenes de raster graphic, o 


en inglés simple: "imágenes en una cuadrícula de píxeles". 


Acerquémonos a una curva plana que es muy horizontal. 


Luego lo compararemos con una línea que es más diagonal. 


Sombrero en el tiempo (PC) 


Date cuenta cómocuanto más pronunciada es la curva,cuantos menos colores hay. 


Por supuesto, para el arte de píxeles, sería demasiado borroso con demasiados colores. no se parecería 


el pixel art tradicional, se parecería a una imagen normal. 


Pasos más largos = Más tonos de AA 
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¡pero hay excepciones! Aquí, las limitaciones de NES 


mostrar la falta de AA muy bien. Con , hay poco que 


STARS 


La aventura de Kirby (NES) 


Sprites con más colores, ofrecen más variedad: 


Desafío de fichas de batalla de Mega Man (GBA) Super Star Ultra de Kirby (3DS) 
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curva convexa 


el centro tienecolores claros 


Los extremos tienencolores oscuros 


o a 


T T 
outline Wwr/oroutling) 


curva concava 


el centro tienecolores oscuros 


Los extremos tienencolores claros 


? it {T 


outline) uo cuina darkiBG) 


Los pixeles más oscuros o más claros cambian lapesode la parte de 45°. 
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rounding off the edges 


Bonificación de lógic: 
¿Aún no estás seguro de cómo hacer que una linea de 45° se cu (No hay problema! 


Aquihayunejemplodeun GCE 


La siguiente curva es del marco rojo que aparece en este sprite. Es 


un contorno, pero podria combinarse facilmente con un fondo. 


colouring the outline + anti-aliasing 


the lighter pixels curve the lighter pixels curve 
the edge of the 45° line the edge of the 45° line 


to obtain a nicer curve 
+) the darker ones creates 


the tip of the curve 


#2 
better! 
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Líneas irregulares 


¿Qué hacer con una línea irregular naturalmente? Son raros, pero existen, no obstante. Prueba este truco. 


la}iagged| shape) | 


¿Desea detenerse allí? Bien, la línea es lo suficientemente suave. 


Imore?/sure] 
but[donit[overdo] 


Fiilfingthe} 
biggest|gaps)! 


¿Quieres ir aún más suave? Prueba esto. 


Smirone 
Mitre 


iestoniyfoptional 


¡Esto funciona para otros tipos de líneas irregulares! 


‘AN 
a h. 


e aa 
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Algunos ejemplos de esta técnic 


¡Maho Sensei Negima! Lección privada 2 (GBA) 


Escena isométrica de Halloween de Temmie Chang (@tuyoki) 


Darkstalkers 3 (Arcade/PS1) 
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Grosor de línea 


Manipulando colorespuedo ayudartehacer que las líneas se vean más gruesas omás delgada, ¡incluso a 1 px! 


Las bocas generalmente tienden a ser solo una línea simple. ¡Así que tomemos cubrebocas como ejemplo! 


Aliento de fuego IV (PS1) 


Los hoyuelos son Wa Mbos labios sonoscuro. 


Los hoyuelos sonoscuroy aparecer más grueso. 


¡Mirar! ¿Qué se siente más grueso o más delgado? 


OSCURO =MÁS GRUESO 


Em As DELGADA 


a oe TA 


Incluso puede agregar líneas más claras en la punta de una curva para recrear pinceladas. 
(ver ejemplos naranja y cian) 


¡Solo juega, pero no uses demasiados tonos! 
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Observa las líneas en los siguientes sprites.Centrarse en sus caras. 


Al agregar más suavizado, las líneas parecen más gruesas. Menos 


suavizado hace que las líneas sean más nítidas y delgadas. 


Lombriz Jim (Sega Genesis) Disgaea 4, Disgaea D:2 (PS3) 


Mira lo fácil que puede convertirse una lineamas gruesoomds 


delgada. ¡Los colores y la ubicación de los píxeles marcan la diferencia! 


Recordar 


No tiene sentido exagerar AA. Puede obtener el mismo 


__when blurred- 


resultado con menos esfuerzo. En el ejemplo de la 


derecha, el lado borroso es casi idéntico en todas las 


etapas. Asi que no hay necesidad de exagerar AA. Solo 


quédate con 1 0 2 colores.. 


El peso de linea es complejo. Es la base de la 


Mito. Mts. 
AAA 


animación de subpíxeles. Esto continuará en el 


capítulo: “subpixelado". 
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Esto sucede cuando dos filas de píxeles perfectamente El uno al otro. Suena lindo, pero esrea/mente no lo es! 


tienen la misma longitud y 


El pequeño Nemo: Maestro de los sueños (NES) 


Puede empeorar: 


Cazafantasmas (Génesis/Megadrive) 


Lo peor es que esta es la punta del 
iceberg con este ejemplo. Hay 
tantas bandas que no me voy a 


molestar con eso. 
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¿Por qué es tan malo? 


Hace que tus curvas se veanen bloque. 
Hace que aparezcan lineasmas gruesode lo que originalmente querías que fueran. Eso 


desdibujatu contorno demasiado. 


Sigue perfectamente el contorno, dando como resultadosombreado de almohada. 


t ty 


Usted podría estar pensando: “no le veo problema?" 


Esto es porquelo estás viendo ampliado. Cuando se ve en tamaño 1x o 2x, realmente 


sangra en el sprite, y ahí es cuando notas bandas. 


¿Cómo lo soluciono? 


O Quitar un píxelo dos desde el borde. 


Añadir un píxelo dos hasta el borde. 


UsarSuavizado. 


¡Consulte las flechas codificadas por colores para ver estas correcciones! 


Dragon Warrior Monsters 2 (GBC) 


Izquierda: Con bandas Correcto: 


Solucionado con el consejo anterior. 


Las bandas son malas, pero no te preocupes. 


A veces es inevitable. 


Cuando lo veas... ¡arréglalo! 


¡Solo trata de eliminarlo tanto como puedas! 


Hay tipos de bandas menos significativos, como las bandas paralelas, difuminadas y 


Bandas AA, pero se mencionarán en el capítulo “Limpiar”. 


5% 


Bonificación de Pixel-Logic #3 


"= ma ¿Aún no ves qué tiene de malo el uso de bandas? 


Si las bandas estuvieran en un dibujo digital regular, se vería así: 


SIN bandas bandas 


. Sería mucho peor si tuviera una sombra suave. 


x 


Otra forma de probar que las bandas son un dolor en el cuello es 


Solo... ! 
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Conclusión 


El suavizado esun gran tema. No se preocupe si se siente abrumado. La mayoría de estos 


tecnicasse volverá instintivo con el tiempoa medida que haces más pixel art. 


¡Algunas personas hacen pixel art sin AA y hacen un trabajo increíblemente hermoso! 


Recuerdabuscar videojuegosque te inspiran ymira como usan AA. 


NO 


0 
Comida para el pensamiento Técn ica S Evitar 
Introducción Cómo aplicar bandas 
¿A AA o no a AA? 


curvas planas 
. A T ? 
¿Cuándo es necesario? Líneas de 45° 


Líneas irregulares 


Grosor de línea 


En el próximo capítulo vamos a echar un buen vistazo acoloresy cómo elegir paletas! 
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Los colores son muy divertidos, pero pueden ser complicados. Ellos son lasmás subjetivoparte de los sprites mientras 


construyen la at 


Shinji 
Ami 


U Kinnara 
5 Tam Lin El Attack 


Batman (1989, NES) Shin Megami Tensei 
(1992, SNES) 


r 
ENERGY FS O20 Of 


144 10 
101 a 


Super Metroid (1994, SNES) Cuentos de fantasia (1995, SNES) SMW2: La isla de Yoshi (1995, SNES) 


weeks f= . 
y 
i 
> 


1934 


88) Hp. 2,71 


Tierra roja (1996, Arcade) Aliento de fuego IV (2000, PS1) 


:Dibujado a la vida (2007, NDS) 
rior derecha:Shovel Knight (2014, varios) 
¡Poderosa fuerza de cambio (2013, WiiU/3DS) 


Se puede aplicar a todo tipo de artes: desde la pintura y la fotografía hasta el diseño de interiores.No entraremc 
; detalles aquí., porque es algo que ya se enseña en las escuelas y los tutoriales sobre la teoría del color están 
muy difundidos en Internet. Los colores pueden hacer o deshacer una imagen, así que asegúrese de conocer sus 


habilidades básicas de teoría del color. 


Para Pixel-logic solo haremos 


Los colores no se muestran de la misma manera en todos los monitores. Es 


un problema común con el arte. ! 
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Cómo elegir colores 


El pixel art es un arte digital. A diferencia de los medios tradicionales, hacer que los colores funcionencon deslizadores. 


Estos son los 3 factores que componen un color para el arte digital. Puede encontrarlos en todo el software. 


Para este libro, utilizaremos el Método 1 como estándar para futuras 


páginas y explicaciones que se refieran a la selección de colores. 


- Los controles deslizantes de 3 colores 


Matiz 
Saturación 


Valor 


Nota: Algunos programas utilizan Brilloen vez de Valor.Es solo un nombre diferente. Cuando 


el tercer control deslizante dice um/inosidaava hacia el blanco en lugar del tono puro. 


La mayoría, si no todos los programas deberían tenerselectores de color 


adicionales. ¡Estos 3 factores no se muestran de la misma manera en cada programa! 


Matiz+Saturación  /Valor Valor+Saturación /Matiz Matiz+Valor /Saturacion 


MSPaint, GraphicsGale, Flash Herramienta de pintura SAI, Photoshop, Pro Motion, Photoshop, 


Estudio de clips/manga 
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Rojo verde azul 


RGB, es unaditivométodo de coloración: 


Para obtenercolores más claros, Udsañadir másde cada valor. 


E ë E EELS ES 
=. al = 
EES OE 
al a dle 
A E ë E ť 
A. =. =. 


Para obtener purogrises, darel mismo valor para cada control deslizante. 


ESS ë o NS 
mh. mh. 
E è ë ë SS 
h. h. 
SES 
a a 


Para obtenercolores mas apagados, mueve los controles deslizantesmas juntos. 
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¿Por qué hacer paletas? 


Tener una paleta no significa necesariamente tener colores a un lado. Todavía puedes ver los 


colores de tu pixel art. No te preocupes. 


te ahorra tiempo 


WM 


Ahorra más tiempo dejando caer los mismos colores, 


en lugar de recrear otros nuevos o mezclarlos. 


te mantiene organizado 


o D 


Si estás usando muchos colores, es posible que te pierdas. Es una 
molestia tratar de encontrar colores si estás trabajando con grandes 


obras de arte. 


Facilita la animación. 


Cuantos más tonos tengas, más difícil será animar sprites. 
No desea que los colores parpadeen cuando se anima su 


arte de píxeles. 


Aquí, realmente no se necesita una Sin embargo, esto definitivamente 


paleta aquí, ¡solo gotas para los ojos! requiere una paleta 


Algunos programas generarán automáticamente una paleta para ti, ¡así que no tienes que hacerlo tú! 


sesenta y cinco 


rampas de color 


Estosson rampas. ¡Simple! 


| TE tt | 
| TEE E 


Arte de pixelytener una cantidad baja de coloresir de la mano. Una buena 
manera de hacerlo es reutilizar los mismos colores en diferentes tonos. No estás 


obligado a hacer esto., pero puede crear algunas armonías interesantes. 


=colores compartidos 


Podrías pensar: “Esto es confuso para mí” .No importa cómo muestres tu paleta. 


vik e” 


Siempre y cuando USTED sepa cómo usarlo. ¿Ver? 


66 ¡Aún puedes mezclar rampas! 


cambio de tono 


cambio de tono, también conocidas como “sombras de colores” , también se pueden aplicar a cualquier otro 


arte visual. Hace que tu arte sea más colorido y atractivo a la vista. 


- Cambio de tono regular 


Castaño claro, utilizado para todos los tonos. Con cada tono, se vuelven más rojos. La 
La sombra es negra y aburrida. sombra es ahorarojo cálido 


C TR Puedes darle diferentes estados de ánimo al verde 
dando luces y sombras de diferentes colores. 


Haz esto porcambiando los controles deslizantes de 


tono. Depende de ti cuánto cambias de color. 


A B A B 


Puede cambiar el tono hacia la izquierda o hacia la derecha en el control deslizante de color. 


ElAEl tono de las rampas cambia ligeramente hacia el amarillo, mientras que elBel tono de las rampas cambia hacia el púrpura. 


ElALas rampas se ven un poco extrañas. ElBlas rampas son probablemente con lo que estás familiarizado. 
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Sonic Rush Adventure (2007, NDS) 


Sonic Rush Adventure (2007, NDS) 


Coropata (2009, NDS) 
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Esta es la razón por la que, en general, las personas suelen cambiar el 


tono de amarillo a púrpura. 


(ue Emili 


gasta des) 


fue eimai 
į Giga at ates 


Puede tener un cambio de tono sutil o un cambio de tono drástico. Es una cuestión de preferencia. 


¡Incluso en escala de grises puedes notar el principio en acción! 


- Multiplicar capas 


En lugar de cambiar manualmente el tono cada rampa de color, puede experimentar con sombras mediante el uso 


de capas de multiplicación. Puede encontrarlos en software más complejo. 


= 
Wi muriy sox 


E muctiecy sox 
— 


Paleta de Cocefi 


Una vez que hayas encontrado algunas combinaciones geniales, jsolo deja caer los ojos! 


Los ejemplos solo muestran azul, verde y magenta, jpero puedes usar otros colores! 
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Bonificación de Pixel-Logic #3 


¡Jugar con 


la saturación también es importante! 


El cambio de saturación no es solo como el cambio de tono. El tono se utiliza para crear una atmósfera o sentimiento. 
La saturación se usa para resaltar un área particular de su sombreado. No pienses 


en los colores como números. Simplemente experimente y vea lo que le conviene. 


Todos los colores tienen Mezclado Saturado desaturado l tono es 
la misma saturación. saturación oscuridad- sombras - fuertemente 
desaturado Saturado saturado 
Destacar Destacar 
El tono más claro esvibrante. El El tono más claro estedioso. El 
tono más oscuro estedioso. tono más oscuro esvibrante. 
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Conclusión 


Echa un vistazo a este sprite de Tentacruel, tanto en su forma original como en sus versiones editadas manualmente. 


¿Ves las diferencias?Las pequeñas elecciones de color pueden tener grandes efectos! 


no = 
O See 


+b lue 
multiply 


tmagenta 


Pokémon Corazón Oro/Alma Plata (2009, DS) 


Estos son solo algunos métodos para alterar los colores. 
La clave es experimentar y estudiar otras imagenes que te gusten. 


El tono y la saturación son ESENCIALES para el sombreado y el suavizado. 


no hue saturation no hue saturation 
change | shift shift change shift shift 


fl 


Tonos negros 


¡Puedes hacer mucho más para añadir estilo a tus sprites! 


Bastantes artistas y juegos.agregue un tinte de color al negro o elija un gris oscuro. 


Emblema de fuego (GBA), Mega Man 7 (SNES), Mario Party Advance (GBA), Leyenda de Zelda: Enlace al pasado (SNES), 
Mario & Luigi: Dream Team (NDS), Earthbound (SNES), Chrono Trigger (SNES), Breath of Fire IV (PS1) 


De izquierda a derecha:Super Mario Kart (SNES), SMW2: Yoshi's Island (SNES), SMA3: Yoshi's Island (GBA), Mario & 
Luigi: uperstar Saga (GBA), Mario Party Advance (GBA), Mario & Luigi: Partners in Time (NDS) , Isla de Yoshi DS (NDS) 
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Los tonos negros no están limitados por juego o estilo. 


Incluso dentro del mismo juego odentro del mismo estilo, tu puedes tenerdiferencias sutiles: 


Bull purple Pure black 


dark brown dull cyan 


Pokémon Blanco y Negro (2011, NDS) 


¿No puedes ver las sutiles diferencias?Vamos a alegrarlos un poco. 


Dull purple pure black dark brown dull cyan 


Aunque su monitor no muestre estos colores, recuerde que su pixel art se comparte en linea, en 


diferentes plataformas o diferentes sistemas.El brillo variará de cada dispositivo. 


We 


. Pueden camuflarse 
fácilmente en un sprite sin que te des cuenta. 


. Funciona bien con paletas que 


tienen atmósferas de fuentes de luz especiales: paletas nocturnas, 


ambientes rojos intensos, brillo verde tóxico y mucho más. 


Cuando mezclas 2 colores complementarios, obtienes casi un 


gris puro. Hace que el gris sea perfecto para difuminar. ¡No es 


bonito, pero es útil! Los grises anulan los 


colores. Los hace neutrales. 


El motor del caos (1993, Amiga CD32) 


Este es un árbol de Boktai: El sol está en tu mano(2003, GBA). El estado de 
ánimo general y la iluminación de esta escena son de color púrpura y, como 


tal, todos los colores parecen diferentes a sus matices habituales. 


el tronco del arbol , pero bajo una luz nocturna. Es 


Si elimina la saturación de los colores, puede engañar 
fácilmente a los ojos de las personas e imitar los colores bajo 
una luz diferente. Es por eso que los grises pueden mezclarse 


fácilmente. 


El uso de grises se mencionará nuevamente en el capítulo “ Ge 
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Escritor invitado: 


Intente evitar los negros puros a menos que sea realmente necesario. 


¡Puedes usar marrón oscuro, morado oscuro, verde oscuro o incluso gris = | = a 
oscuro en su lugar! 


Dale a las sombras un tinte de color también. Siempre que sea 


posible, complemente el color de la sombra con el resaltado. 


El techo de color rosa suave tiene una sombra morada opaca. Las 
mechas de Cocefi suelen tener colores brillantes y saturados. Sus 


sombras están un poco desaturadas y cambian de tono. 


No tengas miedo de probar combinaciones de colores extrañas. Hay mucho ensayo y error involucrado. Asegúrate de 


jugar con los controles deslizantes Tono/Saturación, no solo con el brillo para sombrear. 


A 
ANS 


Escritor invitado: 
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Mi color favoritoes un morado oscuro (R,G,B)=(84,58,84). 
puedo hacerlomuchas rampas de coloresy gradientesde un solo color. Reutilizar los 


mismos colores de sombra hace que el pixel art se vea mas hermoso, creo. 


Al hacer rampas de color por el sistema de colores (rojo, amarillo, 
verde...). pusecolores oscuros y colores claros juntos tanto como 


sea posible. Esto se debe a que es mas facil obtener un tono 


armonizado general. 


Elcantidad de coloresen tus rampas de color 


depende del tamañode tu pixel art. 


Cambio de colores durante el progreso 


Cambio de color constantemente. Tómate un tiempo para mirar hacia atrás. Mire el arte de píxeles de otros y luego mire su 


propia imagen nuevamente. Si todavia me siento incómodo después de mirar los colores, los cambio uno por uno. 


Corrección de color 


Esto realmente depende de para qué se usará el pixel art. 


Para estampados y manualidades. 


Los colores pueden ser severamente restringidos,así que arréglalo en consecuencia. 
Syosa se refiere aquí a la limitación de impresión CYMK que viene con la impresión de trabajos digitales. Los colores 


cambiarán de acuerdo con esta paleta, así que tenga cuidado al usar RGB para imprimir. 


para uso web 


Inserto la imagen en unsRGBPerfil ICC que me permite ver y manejar los efectos del cambio de 


color dentro del navegador. 


A veces, los colores no coinciden con los de otras imágenes, por lo que incluso cuando el color de 


la imagen está bien en sí mismo, a veces termino ajustándolo. 


El consejo de Syosa fue traducido de su idioma nativo: japonés. 


Traducción: Alexander Hicks 


T1 


Elección de colores III 


Colores y estado de ánimo 


Si bien el lenguaje corporal y la expresión facial pueden establecer el estado de ánimo, ¡pintar con colores más cálidos o más fríos puede 


aumentar el estado de ánimo! Los grises tienden a ser colores neutros. 


APR 


Utilizandoblues,moradosyverde azuladopuede darle la impresión de unemoción más fria/triste, 


mientrasrojos,naranjasyamarillospuede dar unemoción más cálida/más feliz! 


¡No tengas miedo de jugar con tus rampas de colores! 


Diversificar tus colores hará que tu trabajo sea más interesante de ver. Romperá el 
mirada monocromática. Puede lograr esto usando diferentes tonos en la misma rampa. 


MA 


Solo asegúrate de que los colores aún se mezclen bien. ¡La experimentación es la clave! 
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Contraste 


Gh A 


Pablo Veer 


La legibilidad es la prioridad número 1 al elegir colores. Me 
gusta elegir colores queagregar mucho contraste a los 
sprites. siempre trato de tenerl color principalpara cada 


personaje que diseño. Este color ya sea: 


O conforma la mayor parte del personaje 
e oresalta las características más importantes 
Es 
entonces usoun subcolorpara agregar características adicionales; ia 
suele ser un color que contrasta mucho con el color principal. El 


contraste se puede utilizar parahacer que un personaje se destaque 


del fondo. Esto esta especificamente dirigido a los juegos. Sin 


D D 2 9 


$ 


embargo, esto no es un problema con una ilustración estática. 


El pez (izquierda) esmayormente verde. Uso unamarillo para resaltarsu boca y aletas 
para enfatizar su apariencia de pez. El amarillo más brillante contrasta bien con el 


verde. 


Si un contorno negro definiera esos detalles, el sprite estaría embarrado 


y menos legible. ¡Un precioso desperdicio de píxeles y espacio! 


Pablo introdujo un concepto muy importante:Legibilidad, que será objeto deCapitulo 4. 


Ye 


Diferentes limitaciones 


El pixel art nace de las limitaciones. Los colores pueden verse afectados por los límites. Hoy en día, no hay límites, ¡pero a 


los artistas todavía les gusta desafiarse a sí mismos! A veces puede crear hermosos efectos. 


Sin embargo, cuando el público en general habla de bit-graphics, ellos confunden 


la potencia de procesamiento de la consola con la pantalla a color. 


Las consolas con la misma potencia de microprocesador no tienen las mismas reglas de color. 


Esta confusión llevó a la cultura popular a referirse a los 


gráficos de consolas anteriores a 1990 como bits, y 16 bits o ered? 


para gráficos después de 1990 archivos de imagen GIF todavía tienen 


una limitación de color de 256 colores. 


La mayoría de las personas ven la falta de colores, 


pero no conocen las reglas y limitaciones exactas. El formato se actualizó por última vez en 1989 


y sigue siendo de 8 bits por píxel. 1 bit 
e permite 2 colores. En matemáticas, 256 = 2 
Consulte las limitaciones de cada consola o computadora 


Bue ni 2 elevado a 8 (=2s). 
para obtener más información. ¡Te sorprenderás! 2i 


HI 38480 ey E 2P 00009 
‘i QU 


00780 a : =) 
AS a oe E 


comodoro64 Sistema maestro de Sega Espectro ZX 


Doble Dragonse ve diferente en cada consola de 8 bits 


80 


[14 Traducido del inglés al español - www.onlinedoctranslator.com 


Sprites con colores limitados 


Nota: No tienes que limitar tus colores. es una elección 


Esta sección es para personas que quieren replicar videojuegos antiguos, hackear un videojuego 2D o les gusta 
divertirse con limitaciones. 1 color que siempre incluye en el recuento total de colores es la transparencia. Por 


conveniencia, lo excluiré de los siguientes ejemplos. 


Mi sprite originalmente tenía 25 colores. Reducido los colores de 24 a 20. 
(24 + transparencia). 
+ Reemplazo de los grises con los tonos de piel. 
Hay 1 rampa de color para cada color principal. Amarillo - * La camisa blanca utiliza el tono de la piel. Nada mal. 


Tono de piel - Marrón - Verde azulado - Verde - Gris * Eliminado el verde azulado más oscuro. Apenas era visible. 


15 colores. Esta es la versión final que decidí usar. 10 colores. El sprite sigue intacto. 
16 colores suele ser el límite para la mayoría de los sprites. No se ve raro....todavía. 

* Fusionó los tonos de piel con el cabello castaño. * Cambié el amarillo por un tono de piel. 

+ El verde y el verde azulado ahora comparten el mismo punto culminante. * Recoloreado los verdes con la rampa verde azulado. 

* Quitó el AA naranja: apenas se veía. * Fusionó los tonos más oscuros entre si 
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Más allá de los 10 colores, este sprite en particular pierde su calidad, colores y detalles. 


Sin embargo, cada sprite es diferente. No existe una “regla única para todos” con los colores. 


resumen paso a paso 


1. 


82 


Escenas con colores limitados 


Reutilice sus colores para mantener su paleta pequeña. 


Los colores se pueden reutilizar en la misma pieza sin perder su valor. ¡Puedes colocar colores juntos que de 


otro modo pertenecerían a diferentes rampas! 


Elrojos en el cabello= elcamay elmesita de noche. El 
tonos de piel oscuros= elsabanas, elalmohaday elpared. 


Eltonos de piel claros=la vela. 


La clave es diversificar tus colores tanto como sea posible.Tener diferentes objetos con el mismo color 


tocándose directamente hará que se mezclen. Las sábanas y la cama tienen colores diferentes, por lo que no se 
mezclan, mientras que el tono de la piel y las sábanas son del mismo color, por lo que se sienten como un todo. El 


cabello es rojo a propósito para separar a la niña de la pared. 
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Limitación extrema 


A veces, por alguna razón extrema, tenemos que trabajar con una paleta fea severamente limitada. 


jEWWW! 


Afortunadamente, podemos hacer que su uso sea más intuitivo reorganizando los colores según cómo percibimos 


los colores en términos de luminosidad. Algunos colores del arcoiris se “sienten” más oscuros y más claros. 


maravilloso ~ 


Supongo que podrías llamarlo £xtremoCambio de tono. Puede ampliar la paleta aún más con difuminadotambién. Pero 


tenga cuidado: el difuminado excesivo puede hacer que una superficie se vea rugosa o texturizada. 
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Conclusión 


El color tiene que ver con el contexto. No solo crea el estado de ánimo o la atmósfera de tu pixel art, sino que 
también define el estilo. Los colores pueden engañar fácilmente a la vista y, con un poco de práctica, podrás 


usarlos a tu favor. 


Pokémon Corazón Oro/Alma Plata (2009, DS) 


Comida para el pensamiento Práctica Limitaciones 
(Opcional) 
Introducción cambio de tono Diferentes limitaciones 
Cómo elegir colores Tonos negros duendes 
; Á ? i 
¿Por qué hacer paletas? grises Escenas 
rampas de color Limitación extrema 


Elección de colores I-III 


Contraste 


Colorear no se detiene en este capitulo. Muchos otros aspectos utilizan los colores a su favor para sacar el maximo 


partido al pixel art. Solo asegurate de actualizar tu teoria del color y recuerda: 


Experimentar! 
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Introducción 


Alguna vez miraste un sprite y te preguntaste: “¿Qué se supone que es esto? ” 


Malinterpretar los sprites es común porque carecen de detalles. 


Zelda: LTTPtenía algunos sprites fangosos. 


Agahnim es el pico de las malas interpretaciones de píxeles. 


A,gahnim 


Entonces, ¿lleva un sombrero o es una cara? 


La legibilidad significa claridad. 


¿Qué tan bien lee tu sprite? 
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El tamaño importa... 


¿Mario está sonriendo o sorprendido cuando pierdes una vida en Mario 3? 
Con 16x16 píxeles, es difícil decir que está sorprendido por su bigote. 


Cuando está en un lienzo más grande, es más fácil saberlo. 


MENORIos sprites lo hacenMÁS DIFÍCILtransmitir cosas 


PYME (NES) SMB3 (NES) SMB2 (NES) SMW (SNES) SML (GB) SML2 (GB) 


mem i 
14x14 16x16 16x24 16x24 12x11 16x21 
Ta Los sprites grandes necesitan líneas limpias y dibujos sólidos. Los sprites pequeños necesitan 


2 
características reconocibles para la legibilidad.No puedes exprimir detalles 


en pequeños sprites, así que asegúrate de adaptar los diseños de los personajes. 
El tamaño de su sprite y lienzo determinará 


cuál debe ser su enfoque. 


Artista invitado: Syosa 
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Estudio de caso: Cryamore 


Modelo de sprite original -190px de alto 


PROS: Limpio y detallado en alta resolución. 
Más espacio para animar. CONTRAS: 


Tiempo y esfuerzo para la animación. 


70% de su modelo original -130 px de alto 


PROS: Calidad de alta resolución moderada. 
Los marcos se terminan antes. 


Expresiones faciales simplificadas. 


CONTRAS: Más problemas de legibilidad, menos HD. 


Menos detalle para el diseño de personajes complejos. 89 


Aa 


Westébamos poniendo el listón extremadamente alto 
cuando se trata de sprites HD de ultra alta resolución. [...] 
original Francamente, no hubiera hecho ninguna diferencia 


simplemente dibujarlo a mano en ese punto. Por supuesto, 


70% 


podríamos mantener los sprites HD y reducir el número de 
fotogramas, pero eso haría que las cosas parecieran diez 
veces más baratas [...] Entonces, nos sentamos y adoptamos 
un enfoque constructivo en la forma en que estábamos 


haciendo las cosas, desapegados. del atractivo emocional de 


lo mucho que nos enamoró este look. 


Ñ 


Blog de desarrollo de Cryamore 


Cuanto más pequeña es la animación del sprite, más suave 
es la ilusión de movimiento. Con solo reducir el tamaño, las 
animaciones se verán aún más fluidas. ¡Los sprites más 

pequeños también te permiten intercambiar disfraces más 


fácilmente! 


Persona 4 Arena (ArcadelPS3Hb360) 


Guilty Gear XX (Arcade/PS2) 


The King of Fighters XIII (Arcade!PS3) 


Cryamore 


Tales of Destiny: Director's Cut (PS2) 

c Namco x Capcom (PS2) 

Disgaea 1 (PS2) 

Á g g La Pucelle: Tactics (PS2) 


La línea entre el arte binario y el arte de píxeles comienza a desdibujarse cuando los sprites se vuelven demasiado grandes. 


Juegos comoDengeki Bunko Fighting ClimaxPS3) están en el límite del arte binario. 
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. . ¡pero los píxeles importan más! 


Los sprites más grandes tienen pocos problemas de legibilidad. Los sprites más pequeños tienden a ser un poco más complicados. 


Obvio verdad? Pero no es tan simple. 


TEY. 


super mario kart(SNES) había mejorado los sprites de Yoshi para la versión japonesa. 


Cuando se encoge en la pantalla, se vuelve menos LEGIBLE. ¿Todavía se parece a Yoshi? 


T BA & a 
z BAS & a 


Incluso dentro del mismo lienzo, tus 


sprites siempre se pueden mejorar. 


Artista invitado: Neorice/ Guido Bos (@Neoriceisgood) 
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bonificación de lógica de pivetes n°) 


Editar un sprite una y otra vez es común. 


¡Haz múltiples versiones y haz que 


la gente elija, si no estás seguro! 


Este duende de Pokémon Rojo/Azuk1998, GB) está destinado a ser un niño 
jugando su Game Boy. El sprite está dentro de 16x16.Sin embargo, muchas 
personas ven esto como un niño sosteniendo una taza.. La mayor parte del 
cuadrado se ve blanco. Tiene 2 píxeles negros y los 2 grises para mostrar la 


sombra del borde. 


Ey 


Movamos los píxeles y veamos si podemos arreglarlo. 


Si cambiamos el sprite drásticamente, corremos el riesgo de crearnuevos problemas de legibilidad. 


En este momento parece que el Game Boy se convirtió en su camiseta y su torso. 


Podemos extender la copa y moverla hacia arriba cubriendo aún más la cara, peroesta podría 
verse fácilmente como una barba o todo tipo de otras cosas. Está demasiado embarrado. 


Ahora tenemos una forma gris plana con una línea blanca de 4 px de ancho.El resaltado 


blanco hace que el objeto sea más 3D. Pero todavía parece un cubo/prisma al azar 


¡Simplemente agregando una línea de 2px para definir la ranura del cartucho de Game Boy, 


funciona! ¡Esto se parece más a un niño sosteniendo un Game boy! 


Para sprites pequeños, la simplicidad suele funcionar. No te 


excedas en los detalles y apégate a las formas simples. 
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¿Por qué cada pi 


Escritor invitado: 


Las resoluciones muy pequeñas pueden volverse problemáticas fácilmente 
ya que cada píxel incluyendo su color, hace una gran diferencia en toda la 
pieza. Por lo tantola colocación de píxeles juega un papel importantepara 


que los espectadores entiendan tu trabajo. 


¡Un píxel podría cambiar la forma en que la gente lo interpreta! 


Cambiar solo unos pocos píxeles puede hacer que este murciélago: 


original be surprised 


look evil have longer ears 


have feet make the bat look smaller 


Chasm (PC y PS4) (trabajo en progreso, versión futura) 


Por qué cada píxel importa II 


Los gráficos de videojuegos más antiguos pueden ser pequeños, ¡pero el lugar de cada píxel no es trivial! 


¡Un área pequeña como 6 por 6 píxeles puede ofrecerle una gran cantidad de variedad! 


Personajes de Technos' Crash 'n' the boys y River City Ransom (NES/Famicom) 


La serie Kunio-kunjhizo que cada personaje se viera diferente ajustando ligeramente los píxeles de solo sus ojos 


y peinados! Eran suficientes para mostrar la diversidad. 


Incluso el píxel más pequeño puede marcar la diferencia en los gráficos de baja resolución.Los escarabajos zumbidos de SMB 


algo parecidas a conchas con un gran ojo negro parecido a una perla. 


Escarabajo Buzzy de Super Mario Brothers (1985, NES) 


En el Super Mario All-Starsrehacer (en la foto abajo a la izquierda E ), se parecen más al arte conceptual. 


94 


Característic: 


Escritor invitado: 


Entonces necesitas crear un nuevo sprite. ¿Qué tamaño realmente necesita ser? 


Hágase algunas preguntas: 


¿Necesito ver sus manos moviéndose?? ¿Sus bocas deben ser visibles o animadas?debe facial 


expresión ser legible? ¿Usan o sostienen un artículo? ¿La espada tiene una gema mágica en ella? 


No importa cuán grande o pequeño sea el elemento, ¡en 


un lienzo de píxeles pequeños debe ser reconocible! 


La parte más pequeña que quiero aquí son las expresiones faciales. 


No me importan las manos u otras partes del cuerpo. 


Intenta decifrarlola parte más pequeña que necesita ser visible. Una vez que tienes eso abajo, es fácil descifrar el 


mínimotamaño de sprite con el que puedes trabajar. 


No te concentres en incluir cada detalle en tu sprite. Descubra qué hace que el personaje sea único y 


represente mejor el concepto. A menudo escuchará “menos es más”, y tiende a ser cierto. 


Si tienes la más mínima duda sobre si tu sprite es legible o no,Preguntale a alguien mas, ¡y no les digas lo que 


se supone que es! Aún mejor, pregúntele a alguien con poco o ningún conocimiento de pixel art. 


gg 


Símbolos fáciles de leer 


Unos pocos píxeles de altura pueden hacer unGRANDEdiferencia. 


E 


28 p: US px 


por Michafrar 


Con menos espacio, hay poco espacio para muchos rasgos faciales o manos. 


Todavía puede agregarlos, pero harán que su trabajo se vea abarrotado y embarrado. 


Si está utilizando arte conceptual, referencias fotográficas o cualquier tipo de guía, 


prepárate para sacrificar detalles sin importancia si es necesario. 


Trabajar en resoluciones más grandes puede parecer más fácil, pero todo es posible con resoluciones pequeñas. Elige 


lo imprescindible,¡así que no se preocupe si algunos detalles no se ajustan a su lienzo! 


Arte original por por Michafrar Artista invitado: 
Monolito Suave Neorice 
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Símbolos I - Manos 


Las próximas páginas discutiránmanosyojos. Abordaremos más en capítulos futuros. Son los 


más complicados a pequeña escala. ¡No tendrás suficiente espacio para pixelar cada dedo! 


a) Empezar manos pintandoformas. El arte de línea diminuta es demasiado difícil. 


ToT Pppp 


¡El arte lineal es complicado con apenas espacio! Te confundirá aún más.Usa formas planas, 


entoncesdetalle.¡Más fácil! Le ayudará a visualizar las manos en 3D en su cabeza. 


2 Dibujar manos como mitones -entoncesañadir detalle 


1.32% oof oF t ha 


No tiene sentido resaltar cada dedo.No tendrás espacio para Enfócate en las formas 


básicas. Incluso cuando tenga los dedos extendidos, comience con guantes. 


(Eb) Centrarse en el índice y el pulgar. Definen las manos. 


gay # 


Un pulgar oponible y un dedo indice definen la mano humana.Esos dos dedos son 


suficientespara mostrar agarrar, pellizcar, señalar y mucho más. 
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a Dibuja solo 3 dedos y un pulgar si es necesario. 


w i G, 
a it @ 


Los dibujos animados a veces dibujan 4 dedos para simplificar la animación. El pixel art también.Solo 


dibuja 5 dedos si tienes suficiente espacio. 


®© Usa diferentes colores para separar cada dedo. 


909211004 


6px 8px 


No siempre tendrás espacio para tener todos los 


dedos o darles un contorno. Cuantos más colores 
diferentes hay, más se destacan. 


Para saber dónde está cada dedo, tendrás que 


outline 


jugar con el brillo del color.Las luces y las 


sombras ayudan a dar volumen.a tus manos 


planas! 


© Dibuja la mano, encógela y utilízala como referencia. 


fr 


Y _ 5 E "i 


Trabajar a pequeña escala puede ser complicado porque no se puede "dibujar" espontáneamente. Si 
realmente tiene problemas o trabaja con una fecha límite, dibuje una mano en su programa de pintura 
habitual y redúzcala. Luego úsalo como referencia. También puedes estudiar el suavizado para ayudarte 


un poco. 


Símbolos II - Ojos 


@ Los ojos son el foco principal y muy importante. 


El ser humano queda cautivado por las 
at” emociones y los rostros. Solo por esta razón, 
debes pulir tus sprites de criaturas, ya sean 
animales o humanoides. Tu audiencia 
identifica caras buscando ojos.Por lo general, 


son lo primero que la gente nota. 


Arte Artista invitado: Temmie Chang 


Eh veces no hay espacio para los ojos! 


Más allá de Oasis (Génesis/Megadrive) 


Los sprites que no tienen suficiente espacio para ningún rasgo facial generalmente no caben en los ojos 
porque serían más pequeños que 1 px. Si es así, concéntrese en las sombras proyectadas en la cara 


para crear el área de los ojos. Si no está seguro, busque algunas referencias de juegos. 


Gentes: ¡mantenlo simple! 


AALS da 


d 


LLEVO E 


Investigaciones de Ace Attorney: Miles Edgeworth (NDS) + Tales of the World: Narikiri Dungeon 3 


Puede que tengas que sacrificar detalles dependiendo del tamaño del sprite. O te enfocas en 


Las gafasensí y excluir los ojos. O 
La parte superior del marco y excluir el lado inferior del marco. 
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O. pocos píxeles marcan una gran diferencia cuando se aleja. 


Ei E ha a TEE a -= DS mer 


Es dificil decirlo a primera vista, pero una diferencia de unos pocos pixeles puede tener muchos resultados. 
Cuando se acerca, es posible que la ubicación de algunos pixeles no tenga NINGÚN sentido para usted. Puede 
parecer poco natural si estas acostumbrado a las pinceladas. Cuando se aleja, algunas combinaciones de pixeles 


pueden dar a los ojos una sensación completamente diferente.AA y sub-pixeling realmente son útiles aquí! 


Un brillo blanco también puede 


afectar el resultado.! A veces es un 


solo píxel, a veces es AA o subpíxeles. 


por Michafrar 


© Los ojos vienen en muchos estilos, pero no evites los detalles de píxeles. 


Soldados de choque: segundo escuadrón (Arcade) 


Los ojos suelen definir tu estilo.Con los píxeles puedes hacer lo que quieras en términos de 
ojos.. No hay limitaciones además de su lienzo. Puedes desarrollar aún más tu estilo, pero al 


igual que el arte normal, asegúrate de pulir tu técnica. 


© UsarsutiSuavizado si es necesario. 


Artista invitado: Thernz 


Como se vio enCapitulo 2, AA puede mejorar la claridad. ¡Tiene buenos resultados! 
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Diseño de personajes y proporcione 


Cabeza contra cuerpo 


Super Back to the Future 2 (SNES, 1993, exclusivo de Japón) 


Grandes cabezastener muchas ventajas. Ellosdar espacio a las emociones y expresionesy mostrar claramente quién 
es el personaje. Es una elección estilística, por lo que puede no ser adecuada para todas las situaciones.Las cabezas 


son la principal referencia de la proporción humana y varían fácilmente! 


Castlevania: Aria of Sorrow (GBA), Castlevania: Dawn of Sorrow (NDS) 


Puede representar personajes conproporciones realistas. Elloscentrarse en el lenguaje corporal. Como 
resultado, debe prestar atención al volumen, el sombreado y la anatomía dentro de estas áreas restringidas. 


Asegúrate de usar siluetas. Tus personajes tienen personalidad y actúan. 


Dar personalidad a los cuerpos diversificando poses y proporciones corporales 
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Diferentes proporciones tienen diferentes funciones. 


Las proporciones que elijas dependerán principalmente de para qué se use tu sprite. Obras de arte generales, íconos 


de usuario, sprites del mundo exterior, sprites de diálogo, diferentes perspectivas: ¡lo que sea! 


world battle icon dialoque 


— a1}? 


battle a world feld battle b portrait 


Lyn - Emblema de fuego (GBA) 


world battle 


Mario & Luigi: Superstar Saga (GBA) 


Pixelart encuentra una manera de adaptar todos los diseños de personajes para que se ajusten a áreas pequeñas. 
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E 


Una silueta clara muestra características importantes como la cabeza, las extremidades, la tela, etc. 


Cualquier cosa que resalte la acción o función del personaje u objeto es un buen 


f 


Calles de rabia 2 Calles de rabia 3 


comienzo. Esto también es muy útil si vas a animarlo más. 


calles de rabia-como la mayoría de las secuelas, mejoraría sus sprites con el tiempo. la silueta 
deSefales mejor en la 3ra entrega ya que se resalta su postura, su puño y su peinado. 


La silueta no muestra demasiado, pero se hizo 
legible mediante el uso de diferentes 
colores en todo tipo de formas dentro del 


dibujo. 


Duelyst (PC) (Beta abierta, 2016) 


Dibujar una base de silueta aproximada y rellenar con 
detalles es una buena práctica.Trate de no superponer 
las cosas, y si eso sucede, use el contraste de color 


para diferenciar las características.. 


Chasm (PC y PS4) (WIP, fecha futura) 
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diseño de colores 


Pablo Veer 


dando a tus personajesun color principal y secundario,te da buenos efectos secundarios. Su diseño 
se vuelve más reconocible y más legible. No incluyas detalles innecesarios en tus sprites. Divídalos en 


20 3 colores principales como otros personajes reconocibles. 


Trono nuclear (PC, Steam) 


¿Pescado? Eso esverdechico con elamarillolabios y aletas! Ella 
¿Rebelde? lleva un granazulbufanda. 
¿Robot? Se define por surojoojo aterrador y ominoso, separando arriba y abajo. 


Los personajes conocidos que se ven en muchos juegos tienen diseños con colores vibrantes. 


mario il Sonic a El E Pikachu E E E 


Elige los colores adecuados para representar las características de tus personajes. Los colores incorrectos llevan a la confusión. 


OY 124% 


¿Na riz o pico? ¿Por qué los brazos de Yoshi eran naranjas? 


Swoopers de £/ mundo de Super Mario Esto no se debe a limitaciones gráficas.. 

(SNES) son murciélagos. Sin embargo, su Probablemente para que los brazos no se mezclen con 

nariz era de color naranja, lo que hace que el cuerpo principal, pero, por desgracia, se ven como el 

parezca un pájaro con pico. Más tarde estribo de su silla de montar. Creador de Super Mario 
los juegos arreglaron esto. (WiiU) lo arregló. Este problema es similar al de Link 


pelo rosa infame de Zelda: LTTP. 
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Sombra suav 


Escritor invitado: 


Dibujar contornos puede ocupar mucho espacio valioso, por lo que jugar con tonos oscuros y claros podría 


ser la solución. 


La luz se usa para 


píxeles oscuros 


La luz y la oscuridad pueden cambiar de función según el color de fondo o la fuente de luz. 


Chasm (PC y PS4) (WIP, versión futura) 


Los tonos más oscurosse utilizan no solo como sombra, sino también para dar profundidad y elementos de contorno. 


resalte los bordes y los detalles cruciales. 


Usando una fuente de luz diferente (por ejemplo, en este 
ejemplo, desde abajo) para diferenciar 


los músculos y otras partes del cuerpo. 


Duelyst (PC) (Beta abierta, 2016) 
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Espaciamiento y tangentes 


El espaciado se refiere alo lejos que están las cosas. Si dos áreas del dibujo de píxeles se tocan, el espectador puede 


tener dificultades para saber qué está pasando. El espaciado utiliza un espacio limitado para incluir la mayor cantidad 


de información posible. Si usas demasiado espacio en tu sprite, dale más espacio para respirar! 


¡Piense en ello como el espaciado de letras con fuentes! 


Por ejemplo: una boca necesita espacio por encima y por debajo, para que puedas decir que es una boca. Si la 


boca tocara la barbilla, o incluso la nariz, no estaría claro qué se supone que debe ser. 


E 


Trono nuclear (PC, Steam) 


Una forma es deshacerse de las líneas en línea. 


Pueden dificultar la legibilidad como se ve enCapítulo 1(p9) Capítulo 3(p20) y en este capítulo de la página 


anterior que acabas de leer! No son malos por decir, pero pueden ser molestos. 
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Otra forma es r 


EnSúper Mario Hermanos 3, el traje de rana debe 
tener ojos encima de la cabeza de Mario o Luigi. ¡La 
forma en que los píxeles están espaciados hace que 
parezcan orejas de conejo! Excepto por un buen 


cuadro: Mario pateando un caparazón es sin duda 


una cabeza de rana. Usémoslo como referencia para 
arreglar esto. 

Fila superior: Original 

Fila inferior: Editado 


No solo eliminé el negro en línea, simplifiqué 
el diseño. Los ojos son completamente 
blancos sin párpados. ¡Las pupilas ahora son 
de 2x2 píxeles y no se mezclan con el 


contorno! 


e S 
(PE 
(24) 
La) 


Así es como interpretamos los ojos de rana si estuvieran en HD 


(fila superior = sin editar, fila inferior = editado). 
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Mover áreas y agregar 


Antes de los remakes de Pokémon Rubi/Zafiro/EsmeraldaGBA), Brendan creó 
cierta confusión:¿Es pelo blanco o es un sombrero?? La pose de espalda no 
soluciona el problema: ¡su cabello está pintado de azul y se mezcla con la 


diadema! 


Si usamos el espacio entre el ojo y las patillas, ¡creamos una 
tangente! 


Podemos crear más espacio para el cabello.seleccionando una 
parte de la cara y muévala hacia la derecha. Ahora el cabello 
tiene 2px de ancho, suficiente para que se destaque. ¡Asegúrate 


de probar varias versiones! 


O- oO Oo 


La paleta no permite un castaño oscuro. Así que para pintar el cabello tenemos que usar el más oscuro 


E 


el tono de la piel y hacer que el cabello sea más notorio. 


NG 
aT. gi 


A 
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Sprites y Fondos 


Los sprites siempre deben destacarse de los fondos para fines de juego. 


¿En qué quieres que se centre tu audiencia? 


Si no estás haciendo un juego,aún desea distinguir los fondos de los objetos.Esto sucede 
en otros medios como la Fotografía. Esto es para legibilidad. 


Adición de contornos 


Tak: error de Mojo (NDS) 
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Estudio de caso: Kirby y el espejo asombros« 


Kirby y el espejo asombroso(GBA) tomó la decisión de incluir pinturas muy detalladas como fondos. No 


es de extrañar que se usaran las 3 técnicas: 


Los objetos y los sprites tienen contornos claros para destacar. 


uc 315 315 315 4 


Los colores del fondo son más suaves para complementar el primer plano. 


y 


x * 


e 


* i pi 
ma * y uc 
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Suavizado y tramado 


Es posible que no se puedan utilizar técnicas más avanzadas, como AA y tramado, ya que 


tomar espacio crítico. 


Como se vio enCapitulo 2, AA puede mejorar ligeramente la legibilidadcuando se usa moderadamente. 


De Kirby's Dream Land 2 (GB) 


El sprite King Dedede original (izquierda) tiene AA sutil para limpiar las curvas. El sprite de la derecha es igual de 


bueno, pero carece de color y es fácil malinterpretar las manchas de píxeles. 


De Jewel Master (Génesis) Izquierda: 


Original. Derecha: Editado. 


El tramado (sombreado a cuadros) es bastante inútil en sprites de pequeña escala.El tramado funciona bien en pixel 


arto superficies texturizadas más grandes. Hace que tu sprite se vea más áspero y menos suave. 


Esto se detallara en el capítulo titulado: “Dithering”. 


Una técnica menos común hoy en día, pero útil para las limitaciones de color. 
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Cómo detectar problemas de legibilidad 


Use miniaturas de vista previa. 


por Michafrar 


Borrando la imagen. 


por Michafrar 


waifu2x 


en/ja/ru 


Single-Image Super-Resolution for anime/fan-art using Deep Convolutional Neural Network 


Image 
URL: or 
FILE: | Browse... | No file selected. 


Limits: Size: 3MB, Noise Reduction: 2560x2560px, Upscaling: 1280x1280px 


—Noise Reduction (expect JPEG Artifact) 
© None © Medium © High © Super(tmp) 


When using 2x scaling, we never recommend to use high level of noise reduction, it almost always m 
worse, it makes sense for only some rare cases when image had really bad quality from the beginning 


abt 2 


Cuando trabaje en una imagen, asegurese de alejar 
mucho el zoom. Para evitar esto, también puede tener 
una vista previa permanente de cómo se ve su trabajo 
en su resolución real. 


(1x- 100% del tamaño) 


Este ejemplo está dentro de Graphics Gale. 


Lo más probable es que los sprites se vean borrosos en 
diferentes dispositivos, o incluso el ojo humano verá borrosos 
los píxeles cuando se vean desde lejos. El desenfoque también 


puede ayudarlo a encontrar bandas. 


Si se ve mal cuando está borroso, debe regresar y 


corregirlo en la versión de píxeles. 


Waifu2x le permite mejorar cualquier imagen, no solo 
el arte de píxeles. Mejora su trabajo, reduce el nivel de 
ruido y optimiza cuidadosamente su trabajo para 


resoluciones más altas. 


Cuando las curvas no se ven bien, es posible que desee 
regresar y arreglar esos dientes dentados. Es... también muy 


bueno. 


Conclusión 


Grande o pequeño, el pixel art ocasionalmente puede crear confusión. Con espacio limitado a veces tenemos que 


hay que sacrificar los detalles para mantener las cosas claras y legibles. 


Recuerda que cada píxel importa. 


Si no está seguro de qué tan legible es su sprite,no tengas miedo de volver atrás y arreglar las cosas! 


Trabajar en pequeño es un desafío, pero te hará darte cuenta de lo importante que es cada píxel. 


Comida para el pensamiento Consejos y trucos Diseño artístico 
Introducción Símbolos fáciles de leer cap. diseño y proporción 
El tamaño importa... Símbolos I - Manos siluetas 
... ¡pero los píxeles importan más! Símbolos II - Ojos diseño de colores 
Por qué importa cada píxel I Por Espaciamiento y tangentes Sombra suave 
qué importa cada pixel II Anti-Aliasing €: Dithering Cómo sprites y fondos 
Características reconocibles detectar problemas de legibilidad 


Pokémon Rojo/Azul/Verde/Amarillo (GBA) 
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eure om 


tramado 


Introducción 


Dithering es una técnica para hacergradientes usando colores limitados. 


Utiliza patrones para mezclar colores. 


¡Con solo unos pocos colores puedes crear la ilusión de 3 colores o más! 


El tramado a menudo se asociacon los primeros diasde pixelart. 


Los gráficos de computadora más antiguos aprovecharon al máximo sus límites de color con técnicas de difuminado. 


~ 56colores únicos 7colores Unicos Acolores únicos 


Dithering 


¿Arte de pixel?X ¿Arte de pixel? Y ¿Arte de pixel? Y 
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Cuándo usar tramado 


PT 


lemasiado difuminado == que tu pixel Ses ve+RUGOSO y GRANULADO. 
Le da al pixel art una textura arenosa innecesaria. 


PERO ——IMIT€mT—] 


Grandegradientes sombreados en celdas sin tramadoresulta enPLANOyA RAYASáreas 


Con el tiempo, los gráficos del juego agregaron más y más colores. El tramado es menos común ahora. 
Requiere mucho espacio para ser utilizado correctamente, por esorara vez se encuentra en sprites 


peroocasionalmente en fondos. También daña la legibilidad, como se ve enCapítulo 4, p.26. 


[PP] 
ety! Para comprender con qué frecuencia y en qué medida se utiliza el tramado,estudia 
= el arte del juego y aprende de tus favoritos.Aprenderás mucho con solo observar. 
mia Sin embargo, primero intente sombrear con formas limpias. 

G 


Street Fighter Alpha 2 (PS1, Arcade, varias consolas) 


¿Cuándo debo probar el tramado? 


e Gradientesque de otro modo usaría demasiados colores para hacerlo manualmente. 
e Cosas que no se animan. Seriamente. 

¢ Texturas(ver tramado estilizado). 

e Fuertes limitaciones de color. 


e Antecedentes: cielos, espacio, vastas áreas que de otro modo podrían parecer vacías o planas. 
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Este es un duende de Monstruo en mi bolsillo(NES). La versión completamente tramada en la parte superior izquierda es la 


original tal como aparece en el juego dentro de las limitaciones de NES. Los demás son versiones modificadas. 


Ao iio ither now dither 


CONTRAS 


DIFUMINACION - Aspero y arenoso 


- Pérdida de tiempo 


- Textura innecesaria 


- No apto para sprites. 
- Inútil para colores altos 
- Dificulta la animación 


- Marcos tambaleantes 


SOMBREO SUAVE 


- Puede parecer plano 


- No hace bien los degradados. 
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tramado a cuadros 


Estos son los patrones más comunes que encontrará, ya que ofrecen la mayor variedad. 


A continuación se muestran todos los niveles de brillo dentro de la 'familia' a cuadros. 


n = 
E 8 EEE 
J a BE 
= E 
| E 8 888 
a Zee 
E E 
| E E EEE 
| a | 
E E 
| E E EEE 
a EEN 
same patterns but inversed colors > 
E E a a a E 
an an 
a E mm mm E E 
E E a a E E 


Si te pierdes,recuerda cada nivel con un patrón. 


Damas, cruces, cuadrados, diamantes, etc. 


jan m md an mnn 


Puede elegir cuántos niveles de Si trabaja en áreas más grandes, puede 
tramado desea entre 2 tonos. Todo aplicar estilo libre al tramado un poco, 
se reduce a la preferencia o la siempre que nunca tenga un píxel ancho 
longitud del degradado o cuántos (2x1 o 2 píxeles que se tocan entre sí). 


tonos tienes. 
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Tramado para curvas 


Las curvas pueden ser más difíciles de tramar, así que asegúrese de jugar para ver cómo se ve. 
Algunas veces puede obtener píxeles doblesque parecen fuera de lugar. Cuando esto pasa,puede 


seleccionar y deslizar el tramado que ya tiene, en lugar de rehacerlo. 


ak E El 


Si su tramado es parte de un 
conjunto de fichas, esto puede 
ser inevitable. 

Esto se debe a que los conjuntos de 
mosaicos siempre tienen un número 


: $ a par de píxeles. 
1 mosaico, duplicado 2 fichas, una 


y reflejado ligeramente diferente Si esto sucede, asegúrese de tener 


2 mosaicos diferentes. 


Ecco el delfín (Génesis/Mega Drive) 


Cuando no tenga limitaciones de color, debe utilizar el difuminado con precaución. Lo mejor es 
evitarlo.Su objetivo es que el tramado mezcle los colores a la perfección sin que se destaquen.. 


Si la diferencia entre 2 colores es demasiado alta (alto contraste), probablemente no deba tramar. 


r 7 7 
| z a n 
i E 


l Goed Slam muje he 


Con bajo contraste, se siente más suave. con alto contraste, ¡es bastante duro! 


Pokémon Mundo Misterioso 3: Earthworm Jim (Génesis/Mega Drive) 
Exploradores del cielo (NDS) 


Avance sónico 2 (GBA) 


El difuminado a cuadros es lo más 


Mantenga el contraste bajo para que el difuminado sea más suave. 


120 


Otros patrones 


Lineas paralelas 


Un tipo de tramado que se encuentra en los juegos de Genesis/Mega Drive, pero que se puede usar hoy en día con fines estilísticos. 


Para los televisores CRT, son 50-50 difuminados más efectivos que las fichas regulares. 


Izquierda y centro: Vectorman 
Derecha: Donald Duck en Maui Mallard 


Las líneas se pueden usar como manchas o desenfoquecon paletas limitadas. Las líneas funcionan mejor para el desenfoque que 


los tableros de ajedrez sí.Esto solo funciona para animaciones limitadas, NO para animaciones fluidas.. 


om E 
a 
h 


b pde Ay, "lk a 


Pokémon Cristal (GBC) 


Las damas son mas adecuadas para degradados. Las lineas paralelas eran para sombras intermedias y los trucos de opacidad para 


viejos televisores CRT. Para mas ejemplos, consulte la pagina 16. 
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Líneas descontinuadas 


Una variante de las líneas paralelas. La Unica diferencia es que esto 
muestra más valor y niveles de gradientes. También puede agregar 


un efecto limpio. 


Más allá de Oasis/La historia de Thor (Génesis/Mega Drive) 


Mazmorra misteriosa de Pokémon Strip Poker: aSGoC (PC-DOS) lombriz de tierra jim 
3: EoS (NDS) (Génesis/Mega Drive) 


Ecco el delfin (Génesis/Mega Drive) 


abolladuras 


Una variante de tramado a cuadros 0 lineas paralelas. Utiliza solo 1 linea 


de tableros de ajedrez. Se asemejan a abolladuras o dientes. 
Este tramado es útil para texturas si tiene poco espacio. Este tipo 


no es adecuado para degradados., jsin embargo! 
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tramado entrelazado 


Kolibrí (Sega 32X) 


El tramado entrelazado (tejido, superpuesto, etc.) tiene parches de tramado que entran en parches mucho 
más oscuros o más claros. El degradado a veces regresa a parches más claros en su camino hacia el tono 


más oscuro. Diferentes parches de damas se tejen juntos. 


Ecco el delfín (Génesis/Mega Drive) 


Si tiene problemas para hacer esto manualmente, haga 2 capas de tramado y haga que se superpongan. 


Mundo de ilusión (Génesis/Mega Drive) 
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Difuminado aleatorio 


af 


El difuminado aleatorio no tiene mucho que pensar.. Aún debe asegurarse de que el degradado 
fluya sin problemas de claro a oscuro. El tramado aleatorio se puede obtener colocando píxeles al 


azar aquí y allá. Sin embargo, por lo general es el resultado de herramientas de filtros, manipulación 


fotográfica o pintura en aerosol. 


Esto no es un pixelart realmente hecho a mano, así que 
todavía se recomienda arreglarlo manualmente. 
Puede parecer bastante perezoso, así que utilícelo en 


maneras ingeniosas y en grandes lienzos. 


Kirby's Dreamland 3 (SNES) 


Un degradado reducido a 4 colores. 
con tramado automático. 
Todavía necesita mucho trabajo y 


parece un ruido aleatorio. 


Por supuesto, el tramado aleatorio se puede hacer a mano. Puedes crear este efecto desde cero, si lo deseas. 


Comienzas pintando varios tonos de colores y terminas mezclando los bordes con ruido aleatorio. 


Por el artista invitado YAA 


En la mayoría de los casos, 


Trate de hacer patrones o mosaicos con ellos (vea la página 12) 
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¡Ahora aquí es donde las cosas se ponen interesantes! 


¡Se creativo! 


Las formas anteriores de tramado eran bastante toscas. Con difuminado estilizado, 
! Recuerda que necesitas 


espacio para usarlos. 


por Michafrar 


e mau 


ia El 


La aventura de Kirby (NES) Street Fighter Alpha: El sueño de los guerreros (GBC) 
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Incluso puede tomar difuminados aleatorios (de la página 10) y convertirlos en conjuntos de mosaicos repetitivos 


para evitar que se vean caóticos. Esta aleatoriedad esrevisado, en vez desuelto. 


x 
Dd 


Crash 'n' los chicos: Street Challenge (NES) Crystalis (NES) 


¡No confundas texturizar con degradados! 


Los degradados son la transición de la luz a la oscuridad. Las texturas son la sensación del material. El 
tramado estilizado puede ser una combinación o ambos, o simplemente gradientes regulares. Las 
texturas no siempre necesitan un degradado de claro a oscuro! 


El tramado puede proporcionar textura si lo usa para parches, pero no como degradados.. 


por Michafrar Artista invitado: Neoriceisgood Artista invitado: 
anubis hijo 
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e 
F mi, 


La isla de Yoshi está repleta de difuminados estilizados. Solo en esta captura de pantalla hay muchos ejemplos. 


D me 


Otra cosa a notar es que/a isla de yoshioptó por tener degradados suaves con sombreado de celdas para el cielo. 


No hay tramado y se mantiene bien. 


+ 


ed ET d hd d he 
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Más que gradientes 


Rompiendo el sombreado de celdas 


Una forma moderna de usar el tramado es romper el sombreado de celdas. Incluso con colores ilimitados, el 


difuminado a veces imita un sombreado suave. Piense en este uso de tramado como unpincel para difuminar. 


Pokémon Rojo Fuego/Verde Hoja (GBA) 


El punto culminante del cuerno de Gengar se funde con el tono principal más oscuro, en lugar de estar sombreado en 


celdas. Puedes hacer la misma técnica, pero solo usando un tono de búfer en tus rampas de color. 


4 4 +1 +4 1 


Esto se ve bien sombreado en celdas pero el tramado se ve mejor aquí... 


mezclando colores 
El difuminado puede ayudarte a mezclar colores, especialmente en pantallas borrosas. Sin embargo, solo 
usará esta técnica si está trabajando con colores limitados. 
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Veamos esta técnica en uso con algo de interpolación paralela utilizada en este sprite de Genesis/Mega Drive. 


Los resultados no se ven bonitos según los estándares modernos, perose veía bien en CRT TV's. 


y +R + 


Los gráficos por computadora después de este punto tendrían más colores e incluso capas transparentes (alfa), por 


As seen on a CRT television 


lo queesta técnica es extremadamente rara hoy en día. Sin embargo, las pantallas gráficas más antiguas, como 


el modo CGA de 4 colores, se beneficiaron enormemente de tener valores adicionales al combinar cian, magenta, 


blanco y negro. 


Corredor espacial (PC DOS) 


Hablamos brevemente de esto encapítulo 3 (página 25)jdonde con 4 colores puedes obtener fácilmente más 


valores! 
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Pinceles para tramado? 


Cuando el difuminado requiere mucho tiempo, ¡hay formas de usar pinceles de difuminado! Algunos de 
estos programas usan patrones de tramado o pinceles que lo ayudan a acelerar las cosas. 


No es necesario "copiar y pegar" todas esas fichas. 


Paint Mode Settings 


Brighten (9) : 2 3 4 la] t 


Translucent (9%): 63 2 E 


li] 
Saturation (%): 25 S | « | b 


Hue shift(%): 25 23 [a = = 
[E] Dither: la] + 
E] inverse E [i] 


Formula: Gradient Invert r 


movimiento profesional GráficosGale grafito x2 
Aseprite y otros programas también te permiten hacer pinceles. 


estudios HD 


Pintura de índice para Photoshop que hace que el difuminado sea más fácil de manipular 


O ~ DAN FESSLER 


- ARTIST FOR GAMES - 


HD INDEX PAINTING IN PHOTOSHOP pixer art | 
A A A AS O 


Artículo: danfessler.com/blog/hd-index-painting-in-photoshop 


Vista previa de vídeo: youtu.be/7Q36EyvaYG8 Apoya el 


juego independiente;AbismoWwww.chasmgame.com 


Recuerde que el arte de píxeles se trata de control, ¡así que asegúrese de corregir manualmente sus resultados! 
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El Sega Genesis (Mega Drive) se basó en gran medida en el tramado alineado. 
(Cables coaxiales norteamericanos, salidas RF o 


cables de antena PAL) 


: A 
A 


TA FFAA 


TN 


De arriba hacia abajo: 


Comix Zone, Earthworm Jim y Donald Duck en Maui Mallard (Génesis/Megadrive) 


El Super Nintendo tuvo dithering al principio de su ciclo de vida, pero los juegos posteriores usaron capas alfa adecuadas. 


Super Mario World (SNES) 
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El tramado no es nuevo 


El tramado se remonta amuchos métodos artísticos más antiguos. 


(Rayado transversales la forma más antigua deusar patrones para mostrar el tono y el valorusando solo 1 


color. Se puede encontrar en dibujos a lápiz, grabados, grabados, bloques de madera, etc. 


Puntillismotambién requiere pequeños puntos distintos para crear una imagen. El arte tradicional no se limita a una 


cuadrícula, por lo queesta forma de mezclar colores es orgánica y de forma libre. 


oes SR ACES Us: “a 
r £ ESO , a te 
` $a a CSS 2d y- 
+ taie Y X AS : = E e AN se _| 
Paul Signac Entrada del puerto de Marsella (1911) 


Graficos monocromaticos, como MacPaint, solo puede mostrar 2 colores: blanco y negro. Muchos 


pixelesSe utilizaron patrones de tramado para mostrar la escala de grises. 


é File Edit Goodies Font FontSize Style 


MacPaint 


Obras de Susan Kare (1984) 
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Conclusión 


Muchos artistas de píxeles optan por no usar tramado. 
Todo se reduce a la preferencia. 


Lo más probable es que no lo uses mucho. Puede llevar bastante tiempo y ser complicado hacerlo bien. 


Puede optar por evitarlo y apegarse a formas limpias y sólidas. 


Recuerda: MENOS esMAS. 


Sin embargo, el tramado es una herramienta poderosa. Hay algunas cosas maravillosas para 
crear con cada patrón.Si elige tener tramado, utilícelo con moderación. No debe sobresalir 


ni chocar con otras imágenes. 


D 


Comida para el pensamiento Técn Ica S Trivialidades 
Introducción tramado a cuadros Pinceles para tramado? 
Cuándo usar tramado Otros patrones Antes de capas transparentes 
Tramado estilizado El tramado no es nuevo 


Señor Monarca (MegaDrive) 
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Introducción 


La perspectiva es cómo el ojo humano ve el mundo. 
Cuanto más lejos está un objeto, máSmenorparece. Cuanto más cerca esté, másmayorparece. 


Es una parte integral del arte y la ilustración. 


E 


Al crear ilustraciones de pixel art, la perspectiva es una habilidad necesaria. 


Entonces, cuando estás creando videojuegos, debes considerar lo siguiente: 


En la mayoría de los juegos 2D, no hay una perspectiva real ni puntos de fuga. Como artistas y diseñadores, ¡necesitamos 
pensar fuera de la caja para crear mundos explorables! Muchas de las perspectivas del juego en este capítulo 


son proyecciones pseudo 3D, lo que significa que/mp/icar3 dimensiones -largo, ancho y profundidad- 


pero en realidad son solo campos 2D. 


Usa una perspectiva que beneficie tu juego. 


Asegúrate de que las imágenes de tu mundo y personajes funcionen con el diseño de tu juego. 
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Vocabulario de perspectiva 


He aquí un repaso rápido de algún vocabulario de perspectiva que se usará con frecuencia en este capítulo. 


Avión 

Una superficie plana 2D que muestra la longitud y el ancho. 

Es como una pared, techo o suelo infinito. 

Eje 

Una línea geométrica con una dirección fija. 

= 

El eje Y es hacia arriba y hacia abajo, el eje X es hacia la izquierda y hacia la derecha, y el eje Z va 
E hacia adelante y hacia atrás. 

Punto de fuga 

Debido a la perspectiva, dos líneas paralelas se encuentran en un solo 

punto. Como un camino que se extiende hacia el horizonte y desaparece 


en un solo punto. 
Proyección 


La forma en que se dibuja una vista 3D en 2D. Piense en ello como si el 


mundo se mostrara en un mapa. 


Ortográfico 
Vistas planas sin perspectiva. 


Evitaremos las matemáticas tanto como podamos, pero nos referiremos a 


,y cuando se habla de dimensiones o ejes. 
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Proyecciones ortográficas 


Desplazamiento lateral 


Ea 


De arriba hacia abajo 


Cima 


isométrica 


$ 


45° dimétrico 
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Dibujos multivista 


Estas son vistas planas consin perspectiva. Son 
bastante comunes en la mayoría de los juegos 2D. 


Todo es perpendicular en una cuadrícula paralela de 90° y la misma escala. 


Con solo 2 planos visibles y sin puntos de fuga, todo parece unrejilla 


au cuadrada. Las líneas verticales y horizontales forman ángulos de 90°.Sin 
Y T embargo, la geometría es solo una guía.. Puedes dibujar cosas en 


cualquier ángulo que quieras. 


138 


Vista lateral 


Este es elperspectiva más común para juegos 2D.A menudo se asocia con juegos de plataformas. 


y shoot'em ups, ya que se centra en el movimiento vertical y horizontal en 1 solo plano. 


Los desplazamientos laterales 2D vienen en muchos géneros, pero generalmente se adhieren a vistas similares, no solo 1: 


Sección transversal (Cámara justo en frente, el mundo es como una rebanada) 


E vista de arriba hacia abajo (La cámara está ligeramente por encima del suelo) 


vista oblicua (La parte delantera es plana, pero los lados están inclinados) 


Estas vistas son ideales para niveles tipo corredor. 
No importa la vista, la línea por la que viaja el personaje no cambia. Incluso cuando 


parece que puedes subir o bajar, siempre estás atascado en una sola ruta 2D. 


walkable 
area 


— 
== 
E] 


EE] = SS 
E 


slightly top-down cross-section 1 39 
orthographic orthographic 


5 
PLAYER 
ENEMY ODO) 


pe z z 3; z x 
ta P. A an = 


A a ae 
ig tr ee 


y 


7 


| tn pe i A IA | 


País de Donkey Kong 3 (SNES) 


mr 


REN'T YOU IN THE ORDER OF NO QUARTER? 
ARE NOT ALLOWED HERE!" GET OUT? 


Shovel Knight (PC, varios) Frogatto (a ser lanzado) 


ZUY kkk 


X (Me =e 


Megaman X2 (SNES) Ristar (Mega Drive) 
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vista de arriba hacia abajo 


La cuadrícula está formada por mosaicos cuadrados, lo que hace que la creación de mundos y entornos sea muy sencilla. 


A menudo se asocia con el mundo exterior de itinerancia libre y es adecuado para la exploración. 


Puede tener diferentes variaciones de ángulos de arriba hacia abajo. 


Depende de qué tan alto o bajo quieras elcámaraser - estar. 


Frente > Superior Frente = Arriba Frente = Superior Arriba > Frente 


Como los Beat em' ups. ángulo común. Más fácil para juegos de fichas. Bueno para la altitud 


3 | A 
LM 


Mercenario (Arcade) Arriba (LR): Mother 3 (GBA), Pocky & Rocky (SNES) 
Abajo (LR): Advance wars (GBA), The Story of Thor 2 (Sega Saturn) 
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Los juegos de arriba hacia abajo generalmente ven el mundo desde arriba, a 45 °. 


Los zombis se comieron a mis vecinos (SNES) Mario & Luigi: Superstar Saga (GBA) 


Sin embargo, algunos juegos de rastreo de mazmorras (como 2Dze/datítulos) mire en una habitación con una cámara colocada directamente 
encima. Esta vista superior ya no es ortográfica y se asemeja a una vista en perspectiva de 1 punto. Como resultado, la habitación está en 


perspectiva mientras que los objetos no lo están. Aparecen en un ángulo de arriba hacia abajo en su lugar. 


Ay ee 
al ++ FAA 


Rol 


AA 


if fee 


JACE 


1 42 LoZ: Enlace al pasado (SNES) Goof Troop (SNES) 


Elze/daproblema de persp 


E o ce SSes 
* * eS se 


1 


TE es 
gesees"eb, 


Ejemplo del mundo exterior. Ejemplo de mazmorra. 


Por extraño que parezca, fue: > las mazmorras, los juegos de Zelda adoptan la vista tradicional de arriba hacia abajo. Esto se ve 


muy diferente de la perspectiva de 1 punto que se usa en las salas de mazmorras. 


Todos los objetos se ven en una cámara inclinada a 45°, pero la habitación está a 90°. Todo parece correcto cuando los 
sprites están cerca del muro norte (A). Cuando los sprites están cerca de la pared sur (B), no tienen sentido. 


Técnicamente, el personaje debería aparecer como (C) pero no serías capaz de verlo muy bien. 


Al voltear la pantalla a/ revés, podemos ver por qué los sprites enBse ven muy mal, pero la perspectiva 


sigue siendo la misma. Es como si Link estuviera tirado en el suelo. 


Si las paredes bloquean la vista, puede eliminarlas 
fácilmente y crear una "cuarta pared" invisible. Algunos 


juegos incluyen paredes; otros los quitan a shuy mas de los 


G o 


piso. 


Esta es una subcategoría de vistas de arriba hacia abajo. Esta vista esEXACTAMENTE 90%si estuvieras 
mirando directamente hacia abajo). Esta elección de diseño es poco común y solo funciona para un 
conjunto particular de tipos de juego. Puede encontrar ejemplos del mundo real de este estilo en mapas 


geográficos, planos y planos de planta. 


Cobra gemela II (Arcade) Contra 3 (etapa 2) (SNES) Línea Directa Miami (PC) 


Algunos juegos del Modo 7 tienen mapas en esta vista transformados en el juego para simular otras vistas. 


De arriba hacia abajo 


dimétrico oblicuo planométrico 
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Vistas paralineas 


verdadera medida y visto desde unvista panorámica. 


axonométricaformas* 


Se centra entodos los aviones 


(SUPERIOR + LADOS). 


Medios isométricosese 


todos los ejes son iguales. 


* Hay más vistas axonométricas, como "trimétrica", por lo que si desea una lectura más profunda, busque libros de Francis DK Chi ng. 


Se centra enel 


horizontales (ARRIBA) 


avión. 


Medios dimétricossolo 


2 ejes son iguales. 


Estas son vistas que dan una calidad tridimensional en una pantalla 2D. Esta 


perspectiva muestra 3 lados de un objeto,en todo momento. mitodo está en 


Se centra enel 
vertical (FRONTAL) 
avión. 


Medios oblicuosel 
el frente es plano, el resto 


está inclinado. 
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Vista isométrica 


El pixel art isométrico a menudo se asocia con el movimiento diagonal, ya que la cuadrícula tiene 
forma de diamante en ángulos múltiplos de 30°. Sin embargo,no puedes tener líneas exactas 
de 30° en pixel art, por lo que todos usan escaleras de 2 píxeles. Esto es técnicamente 26,5”, 


pero es lo más parecido a las líneas de 30°.Construir mundos es mucho más fácil con este 


método de "2 píxeles". 


lt. 


Arriba (LR): Landstalker (Megadrive), Final Fantasy Tactics Advance (GBA), Solstice (NES) Abajo 
(LR): Harry Potter 1 (GBA), Final Fantasy Tactics Advance (GBA), Kingdom Hearts: CoM (GBA) 


El aspecto único aquí es quela rejilla está hecha de mosaicos de diamantes, no cuadrados. 


Esto hace que sea más difícil encajar en cuadrículas cuadradas y alinearlas. 


Estos mosaicos no se alinean bien en cuadrículas cuadradas, pero son mejores para el 


arte de píxeles de forma libre. El área donde se conectan las líneas está limpia. 


Estos mosaicos se alinean perfectamente y son adecuados para el desarrollo de juegos y 


conjuntos de mosaicos. Desafortunadamente, las áreas donde las líneas se cruzan son 
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gruesas (píxeles dobles) y no son tan agradables a la vista. 


En lugar de usar líneas, es más fácil usar formas sin líneas para 
indicar cada diamante, como un tablero de ajedrez. ¡Use este método 


para evitar secciones transversales gruesas! 


un diamantese extiende a través2 baldosas cuadradas. Cualquier 


otro diamante adyacentese extiende a través4 azulejos. 


¡Intenta hacer un tablero de ajedrez para practicar! 


No importa si prefieres conjuntos de fichas o no.Siempre necesitarás una cuadrícula que te ayude a guiarte. 
Si usa fondos de forma libre para juegos, deberá convertirlos en un mapa jugable. Puede parecer más único, 
pero puede ser una pesadilla programarlo si tiene que convertirlo en un mapa. Asegúrese de que lo que dibuje 


pueda tener una colisión adecuada. 


Una pieza isométrica de forma libre Invitado Los fondos isométricos en mosaico de 
artista: Temmie Chang Arco luminoso (NDS) 


Dentro de una cuadrícula isométrica, puede construir todo tipo de elementos. No todo tiene que ser necesariamente en bloques. 


Los cubos y cilindros pueden tener mucha personalidad y vienen en todas las formas y tamaños. 


DIELL 
limo Oec 


Kingdom Hearts: Cadena de recuerdos (GBA) 1 47 


Hacer objetos 


Al hacer objetos, puede acercarse a ellos de dos maneras: 


Puedes mirarlos a ojo, o puedes construirlos. 


A 


Cuando los observa, usted: Cuando los construyas, tú: Serás más 
Estima visualmente las medidas. lento pero mucho más preciso. 

Puede deconstruir fácilmente objetos Usa pautas y aprovecha al máximo 

en formas geométricas simples resultados precisos. 


Nota al margen: la observación es tan buena como el conocimiento del artista, se recomienda construir primero para que comprenda bien cómo observar. 


¡Con solo un simple cubo, construyes todo tipo de objetos! 


Acilindrose puede convertir en un tocón de árbol o un barril. A 


pirámidese puede convertir en un techo o una tienda de campaña. A 


conose puede convertir en un árbol o una torre. 
Aesferase puede convertir en un hongo o un tazón. 


Dibujar un círculo en un plano 


TT ie 


Dibuja las medianas. Ovalo alrededor de la plaza. dibujar el circulodentro. ... iy voila! 
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Dibujar un círculo en un pla 


a e 


| drawacirce | 
(check width/height) 


base 


Encontrar la punta de un conc 


skew vertically 


clean up 


1. 2. an 
a = -a 
mr "a =" a "a -a 
a “== =. ID 
== => = „T 
-a a "a =" a 
a um a 
"ae" BASE "ae" Ep 


„= 
moe 
| 
La -a 
-a A : “=. 
- intersection 
where lines meet 
ma diagonals 
from 1 corner to the other 
5. 6. 
— 
a "= 
a = -a a 
y =- a 
-a _" “=, 
o al a 
a Po i -a 
ee oe a tip of your 
- pyramid 


diagonals 
& 2™square 


= 
ae connect 


a i A 
-m the intersection 
with thecorners 
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1.Te ga listo su sprite de desplazamiento lateral (use líneas para guiarlo si es necesario). 


(2.Sesgarpor30%(0.5) 


(G.Ajustar el spritemoviendo las piezas para añadir más profundidad. 


Ca.Limpiar y rellenar los huecos.Corrija los errores restantes. 


j ¿Por qué 87%? 
Rotate 45° height 12 : 


o- "9 2 
sy 87% width apical y by -30° 
E 
R 


EE $: 


i Skew o 


EE ‘h 


cos 30° = alrededor de 0,866/1 


[14 Traducido del inglés al español - www.onlinedoctranslator.com 


Terreno 


La mayoría de los campos isométricos tienen áreas planas. Puede tener diferentes altitudes, pero a menudo tendrá 
plataformas cúbicas, torres o mesetas. Los terrenos planos son los más fáciles de programar y dibujar. No muchos videojuegos 


2D tienen pendientes. Este ejemplo a continuación de£/ curso de los sueños de Kirbyes una buena referencia para pendientes 


isométricas. 


4044 
404064 
SOO RNG 
TADA ALMAS 
AAA ADA 
TALA AAA AM 
TADA 
TALLA ALAA 
KANLA AAK 
KALA 
77y 
Y 


MD 


En juegos de rol basados en cuadrículas como Final Fantasy Tactics 


Advance 2, estas pendientes solo aparecerán en 4 direcciones ya que 


el juego solo tiene 4 direcciones. 


500001 04904 441 
500 004 4004 


Y ¿ODIA 
604 6.000004 
199467000064 
MAMAS 
da 144444100, 
HHA S66 GG Oy oy 
LL ALL & mb bid 
144 1:04 M0. 0004 
1644 SOGON 16001067 
4 94 00604 INN 
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45° dimétrico 


1 Esta es una vista muy poco común.funciona bien siun mapa tiene estructuras altas 
que no quieres que tu obra de arte se interponga en el juego. 
Se aplican las mismas técnicas de arte isométrico, pero en lugar de 30°, solo 2 lados son 45°, por 


lo que esencialmente sus pautas son series de píxeles individuales de 1x1. El eje vertical es de 90° 


pero los otros dos son de 45°. 


JH 


LR: Earthbound (SNES - Fourside SOLAMENTE), Boktai 2: Solar Boy Django (GBA), Nox (PC) 


Esta visión a veces se considera , porque el plano superior es 
ortográfico. ¡No parece una vista oblicua, hasta que la giras! Otros 


nombres incluyenob/icua axonométrica, oplano oblicuoo incluso oblicua 


military comúnmenteoblicuo planométrico. Un ejemplo notable esciudad 


sim, en SNES. 


52 


Los planos frontales son ortográficos, por lo queplano y sin perspectiva. Sin embargo, todos los 
demás planos se inclinan hacia un lado y permanecen paralelos. Por lo general, tienen una 


inclinación de 45°, pero ocasionalmente pueden ser líneas de 2x1. 


Piensa en "desplazamientos laterales + 2 aviones más". 
Los planos frontales siguen las reglas ortográficas de una cuadrícula de 90°. 


La parte superior y el lateral siguen líneas de cuadrícula de 45° de 1x1 pixeles (pero a vecespoder 


tienen 2 x 2 líneas o 3 x 3 líneas). 


LR: Encadenado (SNES), Double Dragon II (NES), Pacmania (Arcade) 


Si tiene problemas con esta vista, puede usar la técnica de sesgo (mencionada anteriormente en la página 17) para convertir los 


mapas de arriba hacia abajo en oblicuos. Simplemente incline el mapa verticalmente por45° (o 1 unidad) en lugar de 30°. 
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Perspectiva verdadera 


El arte de píxeles que no se usa para juegos generalmente sigue las reglas del arte, la 


perspectiva y la pintura normales. 


L: Sin punto de fuga, todas del 


mismo tamaño. 


TOP Tor | R: Perspectiva verdadera 


con punto de fuga. 


Un objeto visto desde un angulo de arriba hacia abajo también obedecera las reglas normales de las perspectivas y tiene 
su forma sesgada hacia un punto de fuga. No importa qué punto de vista, las líneas estarán sesgadas. Los juegos que 
tienen entornos 3D con texturas de sprites se pueden manipular para que parezcan una vista tradicional de arriba hacia 


abajo. Este ejemplo a continuación es de Pokémon Negro/Blanco(NDS). 


Gráficos originales. Versión ortográfica (por el usuario GuyPerfect). 


True Perspective no es exclusivo de los juegos en 3D. En las ilustraciones del juego se puede imitar fácilmente la perspectiva. 


1 54 Cyberbots (Arcade) Combate real: Fatal Fury 2 (Neo Geo/Arcade) 


Los juegos 2D pueden tener una vista en perspectiva, pero como resultado, requieren que los sprites crezcan y se reduzcan en tamaño. Por lo 


general, lleva demasiado tiempo y energía hacer esto manualmente, por lo que los juegos más nuevos usan sus motores para cambiar el 


tamaño de los sprites automáticamente. 


Indiana Jones y el destino de la Atlantida (MSDOS) 


Aquí hay algunos juegos que cuentan con sprites escalados, manuales y/o automáticos. 


Frontera de la saga (PS1) 


eya — amago” po is ; 


ATA MM 


— Aaa — 
PA AN k, 


ral 
Ant REA adn == | 


Contra (Nivel 2, NES) El mundo termina contigo (NDS) 


Dialogi Borms #6 


Para comprender mejor cómo las vistas 2D engañan a la vista, 
aquí hay algunos juegos 3D detrás de escena que imitan 


vistas de arriba hacia abajo. 


durante unIwata preguntaacerca deLa Leyenda de Zelda: Un Vínculo entre Mundos(N3DS), el director Hiromasa 
Shikata y su equipo informaron que pasaron por muchas pruebas y errores con la vista de arriba hacia abajo. Con 
esta perspectiva en 3D, en realidad no ves gran parte de la cara del personaje, sino solo la parte superior de su 
cabeza. Tendrías problemas para decir que era el personaje jugable Link. Más tarde, Eiji Aonumd (productor de la 
serie) reveló que muchos objetos en el juego se colocaron en ángulo para mejorar la visibilidad. 


lidad 


Ala verdadera vista de arriba hacia abajo en realidad tiene muchos 
problemas. Si lo haces con sinceridad, no parece interesante en absoluto. 


Así que tienes que fingir, pero en el buen sentido. A A 


Satoru Iwata 


Esta técnica no es algo nuevo para los desarrolladores de 
juegos. Se ha utilizado en juegos más antiguos como el 
pokémonen la Nintendo DS. Este ejemplo muestra que las 
cercas y los árboles están hechos de sprites colocados en 


un ángulo de 45°. 
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OMh mas de ridad 


Engatillo cronoen SNES (y más tarde en PS1 y NDS), viajas por el mundo en una vista de arriba hacia abajo. 
En la última parte del juego, un barco volador conocido como "E/ presagio negro" aparece y flota sobre la 


tierra. La forma de esta construcción es bastante peculiar. 


looks like a looks like a a 


original tall tower long aircraft 


tall tower long aircraft 


El barco real era 
nunca se muestra fuera del supramundo y 1 pantalla de batalla en el 


plataforma. El barco solo es visible desde 1 ángulo (el frente). 


La forma más fácil de evitar cualquier confusión es simplemente 
. Con simples ajustes, ya no puede 


confundirse con una torre. 


¡Recuerde pedir comentarios de otros para evitar problemas de legibilidad! 


135% 


vn 
© 
ad 
=) 
© 
o 
Uv 
Lo 
Q 
Vv 
n) 


de guía para ayudarte. 


la y líneas 


Cuando construyes una escena isométrica,usa una cuadrícu 


Primero puede dibujarlo en un programa diferente, o simplemente ir directamente al arte de píxeles. 


NND MAAA 

WAVE) AMA 
ANI WAAAY 
AMAIA AA, 
ION ARAN 


DAN <p 
AMAN 


NAVA A VA VO, 
VAVA 

i 

VV 

AAAA AAWA 
VAVA Va VATA TAN" 


KX VYF 


AAAAAA AAAA 


VAVAVAVAVAVAVAVAVAVAVAVAVAVAVAVAVA VATA VAV 


MANS 
NOANJT 
pe 


AAVV VAYA VA VA VAYA 


\ 


DAY, 


VAMAA 


VIDANAN 


WAM 
NAN 


¡Incluso las formas orgánicas usan formas geométricas como guías! 


Sigue el exterior 


forma de los óvalos... 


i a2 
os 3 
vo © 
fe 
v © 
xe) 

n E 
o c 
E 
5 £ 
e o 
a g 


> 


con solo unos pocos óvalos. 


Estos son como el 


esqueleto de nuestro 


b > 
; yy 


Si no, ajusta un 
poco los óvalos. 


| 


Añade reflejos y sombras. 


Definir detalles y sombreado. 


Formas de bloque dentro del árbol. 


Esto no es solo un tutorial sobre cómo dibujar árboles. El punto aquí esdeconstruir 
formas y ayúdalos a guiarte.Puedes usar esto para CUALQUIER PERSPECTIVA! 
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Mostrando escala 


La mayoría de las proyecciones muestran el mundo del juego a vista de pájaro. Los videojuegos 2D generalmente te hacen mirar 
una Caja de zapatos desde arriba o desde un lado, ya que son los ángulos de cámara más fáciles. Sin embargo, mostrar un 


sentido de escala requiere pensar fuera de la caja. 


¿Por qué no hay tomas de ángulo bajo y solo en escenas? 


En tomas de ángulo bajo, es casi imposible que el jugador 
sepa por dónde camina. Es manejable en 3D ya que el 


jugador puede mover fácilmente la cámara hacia abajo. 


En los juegos 3D, ves tomas de ángulo bajo en Sombra del coloso 
PS2), ya que el juego establece el estado de ánimo y muestra un 
sentido de escala. Esta técnica es más un dispositivo de narración 


de historias, por lo que en los juegos de pixel art 2D solo los verás 


en las escenas. 


Puede distinguir las vistas en 2 planos para dar una idea de la escala. 
LoZ: Gorra Minish (GBA) 


Super Nintendo 


GBA 


Puedes usar Modo 7escalar... ...0 distribuir gráficos en 2 pantallas. 
SMWz2: Isla de Yoshi (SNES) Super Metroid (SNES) 1 59 


Conclusión 


La forma en que su audiencia experimenta su mundo es un gran problema. 


Con los juegos, la proyección que uses terminará definiendo la experiencia del jugador. No se sienta limitado 
por las 7 proyecciones discutidas en este capítulo. Recuerda que el jugador observará esta vista del mundo 
durante todo el juego. Con ilustraciones, siéntase libre de dibujar en cualquier perspectiva que desee. ¡Tienes 


más libertad pero aún tienes que seguir las reglas básicas de la perspectiva! 


Información rápida Tipos de vistas Información extra 
Introducción Di bujos multivista problemas de claridad 
Proyecciones ortográficas dibujos paralineos Uso de pautas 
Perspectiva verdadera Mostrando escala 
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Introducción 


La limpieza describetodos los toques finalesy posiblemejoras. Incluso cuando crea que ha terminado, 


puede haber algunos ajustes que podría hacer antes de dar por terminado el día. 


ásperos Limpiar Completo 


Ex 


Por artista invitado: Yaa 


Si estás creando un videojuego, o simplemente haciendo pixel 
art por placer, lo más probable es que recibas comentarios 
( \ sobre tu trabajo. Esto puede venir en forma de sugerencias o 
consejos sobre cómo solucionar ciertas cosas. Es importante que 
usted también autoevalúe su trabajo, además de que otros lo 
evalúen. 
Como resultado, ¡crecerás más como artista! 


Si desea ponerse al día con los consejos de limpieza, eche un vistazo atrás y verifique: 


Introducción Sree | olor Legibilidad 


Entonces, ¿dónde empiezo? A AA o no a AA Escogiendo colores I . . pero los píxeles importan 
Hardware de la "vieja escuela" Líneas irregulares Escogiendo colores II más las siluetas 
bandas Sombra suave 


Espaciado y tangentes 


1 62 ¡Aparecerán más consejos de limpieza en los siguientes capítulos! 


De áspero a limpio 


marcadores de posición. Da una mirada interna al método de cada artista. Trate 


yy) 7, Algunos videojuegos dejan gráficos sin terminar en sus datos para usarlos como 
NX 


Dar forma + Refinar + Terminar 


EnPokémon Negro2 y Blanco2(NDS), este robot tiene una 
versión beta temprana. El método utilizado aquí parece 
una mezcla de líneas y formas. Las partes del cuerpo se 
han movido y la cabeza se ha reducido. 


En este ejemplo, la imagen ha sido redibujada 


una o dos veces en diferentes tamaños. El 
pixel art también sufrió algunos cambios de 
color. El arte lineal aquí está esculpido y luego 
refinado al final. 


Pokémon Negro2 y BlancoANDS). 


Sprite por Michafrar, Por artista invitado: Yaa 
personaje de nintendo 


Estos sprites eran muy toscos en sus primeras etapas. Son fotogramas intermedios de una animación. Es 
más fácil de usar manchas de colores para los intermedios. De esta manera, se trabaja más con 


luz y sombra, y menos con líneas. 


a de recordar el diagrama en elIntroducción Capítuloy echemos un vistazo más de 
> 7 
cerca a ellos. 
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Líneas + Colores * Acabado 


Use un boceto muy aproximado y luego termínelo en pixel art. 


Dudley de Street fighter III (Arcade; Dreamcast) 


Ie 


Versión temprana Versión final 


EnLa extraña aventura de JoJo(Arcade, DC, PS1), hay 
datos de sprites sin terminar. Este juego (como la 
mayoría de los otros juegos de Capcom) crea sus 
gráficos digitalizando dibujos en papel. La versión 
final está simplemente sombreada. Se realizaron 


bastantes cambios más en la etapa de lineart. 


Algunos cambios fueron sutiles, otros fueron 


completamente diferentes. 


El resultado final puede verse completamente diferente al de la primera línea 


de arte. No se preocupe si su trabajo cambia de su boceto original. 


LD d 
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Estos duendes dela tienda de animalesyZangiefhan visto múltiples cambios. Las 


cabezas de ambos han sidomuy limpiado durante la fase de sombreado. 


Jojo's Bizzare Adventure (Arcade; DC, PS1) y Street Fighter Alpha 2 (Arcade) 


Cuando no hay mucho espacio para las líneas, los artistas no confían mucho en el arte lineal. 


Con pixel art, es común que la versión final se vea completamente diferente 


del boceto, como se puede ver con Zangief. 


El arte lineal es principalmenteútil cuando se está construyendo una estructura geométrica. 


— 
BE 
WLLL A 


a 
Vial 


1 1l il lj T 


be H 


WY’: 


Por el artista invitado Cocefi 
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Ajustando tu sprite 


Siempre puedes hacer mejoras en el mismo estilo artístico. En el mega hombre xjuegos en super 


Nintendo, el protagonista no ha realizado cambios en su sprite predeterminado. Sin embargo, el personaje 


A Zero se le dan colores más brillantes, una postura mejorada, una silueta y formas más limpias. 


El arte es subjetivo. Todo el mundo tiene sus propios favoritos. 


No todos los cambios son necesariamente mejoras para toda su audiencia. 


Ba 
ME 


Persecución mágica (TurboGrafx-16) 


Como probablemente sepas, también 
se realizan cambios de diseño para 
adaptarse a los gustos. Sin embargo, 


no discutiremos esto en este libro. 


Sonic 3 (Beta) (Sega Megadrive) 


Aspectos a tener en cuenta al ajustar los sprites: 


Silueta Diseño 


e, 


Colores Formas de píxeles Iluminación Legibilidad 


ESTAS NO SON UNA LISTA DE VERIFICACIÓN. Usaremos estos ejemplos para simplificar en las siguientes páginas. 
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Hay más que estos aspectos más allá de este libro. 


Ejemplos de videojuegos 


Caminahuesos deEmblema de fuego: las piedras sagradas(GBA) 


El tamaño más grande del cráneo 
permite más espacio para detalles 


y subpixeles para los ojos y la boca. 


La paleta no es muy 


diferente, pero los reflejos Las posturas de cada pose son menos rígidas, más 
intimidante Tienen más personalidad. 


y las sombras son 


más pronunciado. 


Jefe de Frostwind de Atraído a la vida(NDS) 


Una nueva línea oscura perfila las 
mejillas del dragón. Ahora destacan 
más. La versión anterior tenía 1 gran 
forma de índigo que no es 


una mala elección, sin embargo. 


Los colores son más vibrantes. 


Ajustes R) | 


La espada es más 3D y hace 
que la silueta sea más legible. 
Lo mismo ocurre con la tela 


alrededor de su pelvis. 


BA 


La silueta es más fácil. 
distinguir y 


mucho más ancho 


Ajustes 63] A) 


Con solo 1 píxel de diferencia, el 
pupila parece más pequeña. Ese 


píxel blanco es un gran cambio. 


Una sombra más oscura perfila la 
boca. Es mucho más nítido. También hay 


algo de AA para suavizar la línea. 
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Barry de Pokémon Platino(NDS) 


Diamante/Perla (2006) Platino (2008) 


CIU? AA 


La cara se rehace por completo. El ojo derecho es más limpio y La nueva silueta de Barry está más 
la cuenca del ojo ahora es de 90°. La sonrisa es más ancha y más cerca de su hoja de modelo. Sus 
distinguible de la nariz. La mandíbula ahora tiene piernas y brazos se destacan más y su 
suavizado y un contorno más suave. cabello es más puntiagudo. 


Las manos son más pequeñas y más legibles. 
Las formas de píxeles de colores similares son El sprite de 2008 incluye detalles que son más 
limpiador también. Mucho más simplificado. precisos para su hoja modelo. No solo la 


postura, sino también el cabello y el cuello. 


rough sprte final beta final 


pokémonlos sprites en general son un gran ejemplo de ajustes durante el desarrollo. 
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Knuckles el EquidnaSefial de gol de (Sega Mega Drive) 


Sonic y nudillos 
encerrado en Sonic 2 


Prototipo de Sonic 3 Sonic 3 y nudillos 


Entre estas versiones, la única gran diferencia se ve en el retrato de la derecha. Los de la izquierda y del medio solo 
tienen diferencias en los reflejos y la forma del cabello. El del medio (usado en el juego final) tiene un reflejo brillante 


en su ojo. El ojo es mucho más nítido también.Recuerda que 1 píxel puede marcar la diferencia. 


Por alguna razón, elsónico 2sprite de Knuckles tiene tramado rojo alrededor de su boca. 
Esto no se lee bien en absoluto y parece ruido aleatorio (píxeles perdidos). Parece 


bien sin los píxeles rojos, y realmente no necesita interpolación. 


a p 
: = 
Plataforma de perforación de Pulseman(Mega Drive de Sega) Aj ustes A y Y GE 


El sombreado en el viejo. 


ds Å< no respetaba la luz 
Fa siy 

E e fuente. 
oF 


as ot ma En el nuevo, puedes ver que la 
== 


El uso de diferentes luces 
hace que el objeto parezca 
más 3-D. 


El contorno también está sombreado. 


Los bordes son redondeados como 


bien. 


k 


plataforma proyecta una sombra. 


sobre la pieza roja. 
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Aveces, la limpieza requiere un poco de precisión de 
píxeles. Aquí es donde entra en juego el lenguaje de las 


formas. Píxeles del mismo color en formas. los 


llamaremos . Otros los llaman 8 


' , , etc 
Puyo-Puyo 


Si está familiarizado con el Puyo-Puyojuegos, trate 
de imaginar píxeles como puyos agrupados. Esto > 


sucede cuando los puyos del mismo color están uno Ge 


de escalada en roca. Es una comparación a E P i 
LA 


exagerada, pero podría ser útil. 


al lado del otro. Tal vez intente verlos como trozos 


es muy al arte de píxeles. El arte vectorial está hecho de formas geométricas que se 


pueden escalar infinitamente. Las formas no tienen desenfoque y se pueden editar libremente. 


Retrato vectorizado de 


Engranaje de metal sólido 3: 


Subsistencia (PS2) 


MGS3 (PS2) 


Es como si cada bloque de color fuera 1 mosaico. Cuando estas formas están limpias y bien 


elaborados, ¡harán que tu sprite sea un poco más legible! 
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Otra forma de arte que tiene que ver con el lenguaje de las formas esimpresión xilográficayimpresión en linóleo. Se 


centra en yuxtaponer siluetas o formas. algunos elementos de No unlas imágenes ocurren en grabados en madera. 


Estos estampados utilizan bloques tallados de madera para 


y 


imprimir siluetas. Estosse parecen mucho a las plantillasverías 
en graffiti. Cuando superpone varias formas, obtiene una 
imagen completamente coloreada. Esta forma de arte es 
popular en todo el mundo, pero es especialmente prolífica en 


las artes japonesas y asiáticas. 


Estudios Seymour Road, Reino Unido 


Una comparación final que podemos hacer con el arte utilizando el lenguaje de formas se basa en notas de Clases de dibujo de 


Disney de Walt Stanchfield. En estas notas, habla del término “líneas perezosas”. 


4 4 WMientras hablaba con Dan Jeup un día, mencionó "líneas perezosas". 
Se refería a líneas que no describían nada, 


Cosas como forma, textura, suavidad o dureza. A A 


Es como lo que obtienes cuando rastreas algo, una similitud general de línea. 


walt stanchfield 


You say, now | am drawing the bridge of the nose: \ Now the top of the nose : Wo 


Now the front of the nose : - Now the part under the nostril: 


\ 
Now the back of the nostril : Now the top of the nostril : e ( i ) 


Those are all separate parts of the face and must be kept in mind as you are drawing them. 
If you think of all that as being just one big shape it will end up as a lazy-line drawing: 


Now I am drawing the top of the cheek. The 
part nearest the nose and the ear try to stay 
put, so you get a bulge of loose flesh between 
two ends that trail off to where they are 
attached more firmly. 


Lazy lines would not spell out all that action. 
They would simply be there, not describing 
what is actually happening in a realistic manner. 
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[A 


Esto puede tratarse de líneas, ¡pero también es relevante para las formas y el 


sombreado! La misma idea se puede aplicar apinturasy por supuesto ...arte de pixel! 1 71 


Al igual que con el arte de alta definición o el arte tradicional, es más parecido a 
qué tan bien aplicas las pinceladas y cómo todo encaja en tu pieza final. 


a A, g e e 


Lemmings (PC, Amiga y más) Castlevania: Sinfonía de la noche (PS1) 


Las formas más limpias transmiten la mayor 


cantidad de información y, a menudo, se verán La PlayStation puede tener 


mejor. Los gráficos en/emmings(izquierda) son gráficos más avanzados, pero 


: fi : cuando se reduce a 5 únicos 
ruidosos y los gráficos en Castlevaniaderecha) son s 
colores, estas rocas TODAVIA 


de corte limpio. Cuando haces texturas, a a : 
se verán más convincentes. 


Este lenguaje de formas no descarta 
Suavizado. De hecho, ¡AA puede ayudar a 
mejorar ligeramente sus formas! 

Sin embargo, AA no será su gracia salvadora. 
Solo se usa para suavizar las líneas y las formas, 
por lo que, en última instancia, se trata de 


habilidades de dibujo. 
Shin Megami Tensei II (PS1) 


ne 


Castlevania X: Rondo of Blood (TurboGrafx-16) 


Las ilustraciones difuminadas también están compuestas por formas, y el difuminado combina el sombreado de la celda. 
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Ti 4 4 4 5 
sombra i prefiere 


sombreado detallado... 


. ¡como el arte tradicional! 


Fan art de Odin's Sphere por el artista invitado: Yaa 


El sombreado limpio es importante tanto para 
trabajos simples como detallados.. No puedes 


colocar formas de luz y sombra sin pensar. 


El tronco del árbol izquierdo tiene4 tonos principalesy se 
parece más al sombreado de celdas. El tronco del árbol 


derecho tiene hasta 8 tonos en su rampa de color y está muy 


detallado. 3 5 
Madre 3 (GBA) y Alundra (PS1) 


Dominar esto es como un dibujo normal; sucede con el tiempo. verás comoCierta ubicación de 


píxeles puede transmitir luces y sombras mejor que las líneas.. 


Si está realmente interesado en el concepto de definir formas, consulte esta serie deMarco Bucci. 


) MINUTES 


Ox 


Ox Suu PAINTING 


ete 


Titulo: Buenas formas - 10 minutos para pintar mejor - Episodio 4 


Vista previa de video: youtu.be/-ZknWKTpc90 


Arreglar las formas de tu pixel art también es subjetivo ya que cada artista tiene sus propias preferencias y 
hipótesis Es muy recomendable aprender de los demás. Si te interesa el meollo de la cuestión, 


asegúrese de echar un vistazo a la comunidad de Pixelation.org. 1 73 


Múltiples versiones 


Antes de terminar un sprite, es posible que no esté 
completamente satisfecho con el aspecto final.El paso 
final a veces puede parecer una rotonda.Es posible que 
tengas que caminar en círculos antes de encontrar la 
salida correcta. Al hacer varias versiones del mismo sprite, 


puedes elegir tu versión favorita. 


EnCapítulo 4, discutimos cómo un solo píxel puede marcar la diferencia. 


Cambiar algunos píxeles no creará unenormediferencia, pero aún pueden tener unaefecto sutil! 


AA 


por Michafrar 


Cuando no está seguro de qué se ve mejor, crear múltiples versionesy hacer que otros voten por su 


favorito. Si está solo, tómese un descanso y compare con nuevos ojos para elegir uno usted mismo. 


de, de 


Por artista invitado: Steven McCarthy 


Con poco espacio, puede ser complicado pixelar exactamente lo que quieres. Sigue intentándolo hasta que consigas un resultado decente. 


resultado. Si nada funciona, intente pensar fuera de la caja y comience de nuevo. 


No siempre se trata de las pequeñas diferencias. ¿No estás muy 
seguro de todo el sprite? Intente hacer varios bocetos para que pueda 


tener una idea de la postura o el estado de ánimo. 
Por artista invitado: Shawn Martins 
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La herramienta de selección 


aoe U En lugar de volver a dibujar píxeles desde cero, puede 
oO A seleccionar áreas de su dibujo y moverlas. Esto puede ahorrarle 
\ Y mucho tiempo. Si dibuja o anima digitalmente, debe 
\ - oO estar ya familiarizado con esta herramienta. 
ae 
ù- = La herramienta Lazo también puede ser útil, pero a veces es demasiado sensible 


para controlarla. ¡Asegúrate de que la herramienta Lazo tenga un alias! 


de Michafrar, personaje de Nintendo 


Puedes mover partes y modificar tu sprite. 


Si su trabajo no está en el modelo, puede hacercambios simples con la herramienta de selección. esto parece bastante 


obvio, pero no olvides que esta herramienta existe. Recuerde ajustar y arreglar las cosas sobre la marcha. 
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fill gaps 


Aquí hay un ejemplo de un sprite que se mejoró usando la herramienta de selección. 


Ambos sprites fueron hechos por el mismo artista (Michafrar). 


Antes Después 


eye 1px left mouth lowered 1px 


reduce the size of 
the top of the eye 


hair outline+ : E er 
added eyebrow Shading and A-A + Subpixeling 


aaa 


Entonces, ¿cómo se hacen esos cambios sutiles? 


subpixelado 


pequeños pueden mejorar tus sprites. 
Espéralo en el Capítulo 8. 
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Escalado y rotación 


Cuando tiene la tarea de reducir un sprite, debe sacrificar los detalles y prestar más atención a 


la legibilidad. Vuelva a mirar el capítuloLegibilidady las paginas”El tamaño importa...” 


Eee ee 
€-S 


Cambiarás entrela herramienta cuentagotas y lápizi¡mucho! Así que haz un buen uso de ellos. 


Cuando simplemente cambias el tamaño del sprite, terminarás 
con un mosaico pixelado. ¡Se ve bastante desordenado!Parece 
mucho trabajo, pero puedes limpiarlo por completo..Utilice el 


mosaico redimensionado como base y vuelva a dibujar las 


características y líneas importantes. 


resized 


cleaned up 
manually 


Este es uno de los mejores ejercicios para aprender pixel art de forma intuitiva. 


La modificación de los sprites reducidos te hará pensar dos veces antes de colocar los píxeles. 


¡Intenta hacerlo tú mismo! Es una buena practica :D 


La misma limpieza se puede realizar en sprites ampliados, pero será más una tarea de dibujo. 


A menudo es mejor empezar en grande e ir más pequeño que al revés. 


o ree ae 
original resized 


TS. 


por Michafrar 


original 150% cleaned up 


LL 


por Cocefi 


Sin embargo, la limpieza se usa con más frecuencia para los sprites rotados. Puede rotar partes del cuerpo o fondos 
más a menudo que cambiarles el tamaño. El proceso es el mismo: cincelar y agregar píxeles a medida que cae el ojo 


& redibujar sobre el sprite. 


rotated in rotated using 
Graphicsgale in Aseprite  Rotsprite 


THEN, 


cleaning up lines and shapes 


Sprite del artista invitado Don. 
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¡Tienes que mantenerte alerta cuando eres un pequeño duendecillo!La nitidez es más 
que cuán borrosa o clara es una imagen. El color, el contraste y las formas también 
juegan un papel importante. Si utiliza un filtro de "nitidez", puede ver cómo se ven 


afectados los colores y la forma de una imagen. Sin embargo, estamos aquí para hacerlo 


manualmente. Así que nada de filtros. 


Aplica los consejos de esta página solo si crees que son necesarios.Aquí hay algunos 


métodos para mantener sus sprites nítidos y legibles, incluso desde una gran distancia. 


ga con más luces y sombras, no confíes demasiado en el arte lineal 


St 
<$ Se 


pixel vector upscaling 


mano 1se dibujaba con líneas, pero creaba manchas de color ilegibles. Es más fácil diferenciar los 
objetos usando formas limpias de luz y oscuridad enmano 2. ¡Un mayor contraste también lo hace 


más legible! 


Añadir más destacados 


por Cocefi 


sega líneas más oscuras para resaltar las cosas 


1793 


por Yaa 


Varios ajustes posibles 


Kung Fu de acción de Jackie Chan (TurboGrafx-16) 


Sin ajustar ningún píxel, puede cambiar el contraste de colores. Simplemente haga esto volviendo a colorear cada rampa de una 
paleta de colores o usando controles deslizantes de color y luego arreglándolos manualmente. Tenga en cuenta: El contraste puede 


ser estado de ánimo, matiz, saturación y valores.. 


Este es el mismo principio que se ve en los tutoriales sobre cómics y guiones gráficos. Los contornos tangentes pueden 


destacarse. Si usa esto en la animación, puede salirse con la suya, ¡así que no se preocupe por esos casos! 


Sombra suave 


Retocar colores no suele ser suficiente, también debes considerar lo siguiente:fuentes de luz, Destacar, 
oscuridad,áreas. Tendrás que jugar con las formas, la luz y las sombras para hacer los arreglos 


necesarios. 
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[14 Traducido del inglés al español - www.onlinedoctranslator.com 


Modelado de personajes y detal 


dere 


Sprite de Michafrar, Personaje de Nintendo 


Los cambios también pueden implicar hacer referencia a hojas de modelos de personajes o cómo se construyen los diseños. Si está 


agregando/reduciendo detalles, siempre es bueno tener material de origen para tomar decisiones. 


Dimensiones 


Con elherramienta de selección(o herramienta de lazo), puede 
mover fácilmente las piezas. Pixel art es fácil de editar, por lo que 


las proporciones de un dibujo se pueden corregir incluso al final. 


Cuando la perspectiva de tu sprite no se ve bien en tu primer intento,siempre puedes usar la herramienta de 
selección y editar partes. Con este sprite de barril ajustado, se ve más de la tapa superior y menos del cilindro. 
Para asegurarse de que los objetos que dibuje estén dentro de la misma perspectiva,simplemente coloque los 


sprites uno al lado del otro para detectar cualquier error o diferencia. 
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De principio a fin - yo 


Para este sprite, tenía que ser eficiente en cuanto al tiempo y decidí 
comenzar con un boceto dibujado. A partir de ahí, lo reduje al 
tamaño de pixel art. Un boceto para obtener la personalidad y 


sentirse bien, luego otro para crear un arte lineal más limpio. 


En lugar de ir directamente al arte lineal, abordaré este 


sprite área por área. Comencemos con el abrigo. 


Independientemente del método que utilice, el proceso suele ser: 


Colores planos - Sombreado - Detalles 


no delineé la cara, porque el tamaño del lienzo es muy restrictivo y hay poco espacio para los detalles. Así que por si acaso 
mantengo el boceto en una capa. Las manos son lo suficientemente grandes, por lo que fue posible delinear. No es 


frecuente que puedas pixelar cada dedo. 


Hice el rabillo del ojo más definido. Sin embargo, la cara necesita algunos ajustes para quedar bien. 
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ejejele 


Para este sprite hice múltiples versiones de su sonrisa y decidí ir con mi favorito (que era con 


la boca cerrada). Vuelva a consultar elVarias versionessección de este capítulo! 


En estas etapas finales, decidí modificar los colores dentro de la línea de arte para dar una mejor sensación de contraste, 
al mismo tiempo que agregaba detalles en la parte inferior de la imagen. Con una línea de arte más clara en la parte 
inferior, implica una sensación de grosor de línea que puede ser difícil de ver con un contorno negro puro. Vemos este 


estilo de contorno enCapítulo 1! 


Para resaltar el contorno, agregué píxeles más oscuros para hacerlo más nítido. Esto se vincula con 


el Nitidezsección de este capítulo. 
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De principio a fin II 


shawn martins 


Si está acostumbrado a dibujar en un lienzo pequeño, puede 
hacer un borrador directamentedibujar con el pincel de 
píxeles. Una vez que se completa el boceto, los colores base se 


distribuyen sobre el boceto. 


Generalmente comienzan pordetallando un área, con 
el fin de establecerel estilo, los colores y la iluminación. 
Sin embargo, nada es permanente. Esto es evidente 
cuando se observan los cambios realizados durante el 


proceso. 


Las piernas atravesaronmúltiples cambios. Se hicieron muchas versiones diferentes para hacer la pose más 
dinámica. Como hemos visto anteriormente, es bastante comúnprobar diferentes diseños antes de 


conformarse con uno final. 


Una vez que las piernas están completas, másse agregan detallesal resto del sprite. De vez en cuando, el 
artistavuelve a ajustarpiezas previamente completadas. Esto implica mover partes con la herramienta de 
selección y volver a dibujar partes desde cero. Los cambios necesarios quedan a criterio del artista. Una vez 
que están satisfechos con el aspecto final, ¡el sprite está completo! 
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Escritor invitado: 


Yaa comienza una escena con un boceto muy tosco directamente 
en píxeles. La fuente de luz se establece desde el principio. De esa 
manera, es más fácil encontrar los colores de los personajes y 
objetos, en lugar de comenzar con el blanco y dejar el fondo al 


final. 


Aquí hay algunas partes específicas de la obra de 


arte, paso a paso. 


AN 


sketch silhouette shape + midtone (line) a at a 


A e 1 x ; 
thumbnail basic shapes detallsonthe — Small adjustment + Shading 
with lightsource upper body —(faceismorereadable) +AA / dean-up 


Thumbnail rough shape refine shape +shading +AA smoothing +shine +details 
+ dark shade 
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Conclusión 


Dibujado a la vida (NDS) 


El proceso de “limpieza” puede no parecerle una tarea obvia al principio. Es bastante sutil en la ejecución, pero 


puede marcar una gran diferencia. 


La limpieza en pixel art essimilar a la limpieza en Animación 2D. Comparten la misma mentalidad y lógica. 


Revisa los borradores originales y literalmente los limpia repasándolos nuevamente con detalle. 


Todos estos ajustes y cambios suceden en cualquier etapa de su trabajo. 


Todas las técnicas del capítulo anterior juegan un papel en la limpieza. 


La mayoría de los cambios ocurren cuando recibe comentarios o autocrítica su trabajo, al final. 


¡No dudes en mejorar tus sprites, incluso cuando creas que has terminado! 


Comida para el pensamiento Consejos y trucos 
Introducción Formas más limpias 
De rudo a limpio Múltiples versiones 
Ajustando tu sprite Herramienta de selección 
De principio a fin 1 y II Escalado y rotación 
Afilar 


Varios ajustes posibles 
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ait ilo 


e 


A 


Introducción 


Súper Metroid (SNES) Metal Slug 3 (Neogeo) Darkstalkers 3 (Arcade, PS1) 


Es probable que haya oído hablar de subpixeling. A menudo se ve enanimaciones inactivasy muymovimientos 


sutiles. Muchos juegos de la era dorada usaban esta técnica. Estos gráficos han inspirado a los artistas de hoy. 


Y 


Esto es 1 píxel. Un subpíxel, pero imposible esto tambien es imposible 


El píxel es la unidad más pequeña de resolución. NO podemos ir más pequeños, ni dividir píxeles 


entre dos cuadrados. Así que tenemos que fingir yencontrar una manera de imitarlo. 


El subpixelado es un procedimiento avanzado y complejo. Si tienes problemas, no te preocupes. 


No siempre es necesario, pero es un desafío divertido para perfeccionar tus habilidades de animación. 


Sprite de Michafrar, personaje de Nintendo 


Cuando vea este ícono, significa que la imagen tiene una versión animada. Puedes abrir estas animaciones 


y hojee los marcos. Se pueden encontrar en la carpeta digital que viene con este capítulo. Pe ola 


Cuando cómo 


El subpixelado se puede encontrar en 


SS 


Imagenes fijas animaciones 


Para imagenes sin movimiento, el subpixelado se conoce como suavizado y grosor de linea. En el caso de los sprites 


animados, se denomina animación subpixelada.Ambos se basan en la misma técnica para crear ilusiones: 


suavizado.En general, el término se utiliza para hablar exclusivamente de animación. ¡Solo para que sepas! 


Iconoclastas (PC, PS4, Switch) 


» 


Iconoclastas (PC, PS4, Switch) 


fi 


Ataque de babosas metálicas (Móvil) 


Bx 


LOZ: gorra Minish (GBA) 


Sonic Mania (varios) 


Entrar y salir 


Para acelerar o desacelerar las animaciones, los artistas espacian sus dibujos dentro de 
cada cuadro más juntos o más separados. Esto se puede ajustar fácilmente. Es dificil 
dibujar elementos intermedios muy juntos sin efectos de oscilación no deseados; para 


evitar que esto suceda, subpíxeles los intermedios en su lugar. 


Animaciones inactivas 


Cuando los personajes están inactivos, puede optar por crear animaciones dinámicas, 
movimientos sutiles o un poco de ambos. Los subpíxeles le darán ese detalle extra que de otro 


modo no podría obtener simplemente dibujando libremente o moviendo partes. 


Dando vida a partes inmóviles 


Cuando animas grandes movimientos, algunas partes pueden permanecer inmóviles. Dar 
subpíxeles a esas áreas ayudará a que se destaque menos. Si animas en alta definición, es posible 


que estés familiarizado con las técnicas de ebullición de líneas para evitar que las cosas se detengan. 


Pequeñas resoluciones 


Cuando tienes un lienzo de 32x32 píxeles o menos, es más difícil hacer sprites legibles. 
Además, es aún más difícil crear movimientos creíbles en un espacio tan reducido. Es más 


difícil simplemente mover las piezas. 


Efectos del viento, risas, temblores, escalofríos y tambaleos. 


Los movimientos en los que los personajes u objetos apenas se mueven pueden beneficiarse fácilmente de 


algunos subpíxeles. 
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Cambio de píxeles 


Ou y yu 


Los píxeles son como tazas de agua. Podemos verter un poco de agua en la siguiente taza. Se distribuye en copas de 2 


píxeles,pero el total sigue siendo una taza de agua de 1 píxel.Este es uno de los principios del subpixelado. 


i 
j 
| 
| 
| 
i 


i 7 i 
f 

i | | 

H H H 


La cantidad de agua en una taza = el brillo del color. Al mover el píxel Y 


px hacia adelante, el siguiente píxel se vuelve más oscuro o más claro. 


Al animar en subpíxeles, 


El valor y el color se transfieren al siguiente píxel. 


Rara vez ocurre un píxel perdido como el ejemplo anterior. Los 
píxeles siempre están rodeados de otras formas, contornos, 


o fondos. Lo que obtendrás en su lugar es esto. —> 


Sonic Manía (PS4, Switch, PC, XBO) 


No es necesario cambiar el valor de cada píxel. ¡A veces puedes mover un píxel entero normalmente! No tiene que 
mover necesariamente cada píxel en el lienzo, ya que eso podría crear bandas. Algunas partes pueden permanecer 


quietas, sin ningún cambio. La animación y la legibilidad son más importantes que exagerar los subpíxeles. 
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[14 Traducido del inglés al español - www.onlinedoctranslator.com 


el principio básico de subpixeling 


S? 


1 taza llena se puede verter de manera diferente, por lo que puede tener más líquido en 1 taza que en la otra. 


Los subpixeles no siempre son % píxeles. No es necesario que se desplacen mas del 50 % exactamente. 


reutiliza los colores que ya se encuentran en tu sprite 


También puede llamar a esta técnica píxeles de natación, transferencia de píxeles o incluso sangrado de píxeles. Tal 


vez intente ver subpíxeles como rastros de fantasmas o manchas que manchan los píxeles a medida que se mueven. 


fotograma inicial YUAN intermedios ANN iI IANA fotograma final 


EH 


Cuando una línea o forma se aleja, puede dejar algo de AA atrás. Como un caparazón de su antiguo yo. ¡A veces parece 


una fila de píxeles fantasma del cuadro anterior! Recuerda NO dejar ningún AA de color claro en el contorno. 


Encontrarás más sobre esto en la página “Movimiento”. 
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Grosor de línea 


Hemos discutido brevementegrosor de /ineaen el capítulo 2, así que siéntete libre de refrescar tu memoria. Los subpíxeles le 


permiten hacer lo que normalmente hace en las ilustraciones HD. Este tipo dejel subpixelado realmente es solo AA! 


2 16 48 25 D 


Grosor de linea Bordes finos Centro delgado & mas 


P A | ; EE 
Podemos probar que las líneas se oi ie 


Ñ 5 1 [O II 
vuelven más claras cuando son más IS H 2 
delgadas, encogiendo estas líneas. La o 3 Ta 15B —— 


forma y los bordes se vuelven 
Ez: —_ 


En 4 Sin embargo,las cosas solo se vuelven mas brillantes cuando se 


mas brillante en color también. 


sombrean de oscuro a claro. Esto significa que ocurre lo contrario 


cuando se trabaja con formas oscuras. 


Conclusion 


Fondos claros 


[92 


Estos ejemplos deben ser lo suficientemente claros para 
estudio! Tienen un ancho de línea variable. Preste atención 


al brillo (valor) de todos los píxeles suavizados. 


Mario y Luigi: 
Saga superestrella (GBA) 


Por el artista invitado YAA La leyenda de Zelda: Minish Cap (GBA) 


a "Ml 


La leyenda de Zelda: Minish Cap (GBA) 


Las grietas más delgadas en esta roca terminan en píxeles más claros. Las grietas más profundas usan píxeles más oscuros. 


Es fácil confundir el grosor de línea con el sombreado 


Jy Pueden verse como un sombreado más claro o parches más oscuros, ¡y eso está bien! 
Al final, el mismo suavizado se puede usar para múltiples efectos. 


En este acercamiento puedes ver cómo el suavizado actúa como subpíxeles. Enfócate en la máscara alrededor de los 


ojos del personaje para ver la diferencia.Versión Xtiene un antifaz más grande queVersión Ylo hace. 
1 2 3 4 
b "Jal" P. — E 


por Michafrar 


1. El ojo superior izquierdo tiene AA más claro en la versión Y, lo que hace que la línea sea más delgada. 
2. El ojo superior derecho tiene una fila más clara de subpíxeles AA en la versión Y. AA más brillante en 
3. El ojo inferior izquierdo tiene la versión Y. 


4. No cambia el brillo, pero el AA oscuro es más corto. 


Como hemos visto muchas veces antes, 
cada píxel puede marcar la diferencia. A 
veces, iluminar u oscurecer el AA crea 


subpíxeles y produce resultados diferentes. 


Ampliado con waifu2x.udp.jp 


Dividir píxeles 


el equivalente 
Los píxeles divididos son píxeles repartidos en 2 bloques. El píxel ae pead 
completo no puede existir así, por lo que su valor se divide en 2 
píxeles, cada uno de los cuales es el 50% de su brillo. 
Démosle un buen uso a estos píxeles divididos. 


Ed 
por Michafrar Si las lineas fueran HD lo que imaginas lo que tu píxel 


Cuando reducimos estas imágenes a su 
tamaño original (1x), ¡los resultados son 
casi idénticos! Estademuestraque el 


subpixelado importa. Intenta usar dividir ge E E 


¡píxeles para un mejor grosor de línea! 


En algunas situaciones, puede agregar 
ligeramente más peso (brillo) en 1 lado 
del píxel dividido. Esto es realmente solo 
AA combinado con píxeles divididos. 


La leyenda de Zelda: Minish Cap (GBA) 


A menudo hay áreas donde los píxeles 
divididos pueden ser útiles. No siempre 
son necesarios, pero pueden generar 
cambios sutiles. También puede ver 
que estos píxeles divididos reciclan el 
color gris que ya se usó en la paleta. 


Pokémon Blanco y Negro (NDS) 
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engañando al ojo 


Aquí tienes algunos trucos o creando ilusiones para engañar a la vista. Estos son extremadamente sutiles, eso sí. 


Doblar formas 


En esta enredadera verde, la parte diagonal tiene AA colocadas en diferentes esquinas. Estos subpíxeles empujan un 


forma en una cierta dirección -todo mientras el contorno es idéntico! Cada píxel importa aquí. 


P 
l 


lo que tu mente 
percibe: 


formas sesgadas 


La dirección y la ubicación de su AA pueden 
sesgar la forma en todo tipo de formas. 


No es probable que use esto para sprites 
estáticos, pero puede ofrecer sutilezas adicionales 


dentro de sus animaciones. 


Adelgazamiento de formas 


Las líneas horizontales pueden parecer más 


delgadas que las verticales y viceversa. Este 
efecto es tan sutil que puede 


fácilmente ser ignorado. 


The Legend of Zelda: Un vínculo con el pasado (Super Nintendo) 
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Contorno selectivo 


Los contornos selectivos a menudo se confunden con contornos sombreados con AA alrededor de los bordes. Eso 


es más o menos lo que son, pero tienen un propósito diferente. Entonces, ¿por qué el contorno roto? 


Contorno coloreado contorno selectivo Contorno sombreado 


Darkstalkers 3 (PS1/Arcade), Super Gem Fighter Mini Mix (Arcade, Saturn, PS1) 


Los contornos selectivos hacen que los objetos de primer plano se mezclen mejor con su entorno. 


Klonoa: El imperio de los sueños (GBA) 
El contorno selectivo es sólose utiliza en capas que tienen un fondo transparente.Si los objetos se superponen 


en un entorno de color neutro, se verán más suaves con un contorno selectivo.Se trata de contexto. 


Estas líneas discontinuas a menudo se 
verán mejor enfondos oscurosSobre 
un fondo claro, a menudo se verán 


irregulares. 


Si su objeto SÓLO aparecerá en fondos 
oscuros, puede usar contornos 
selectivos de manera segura. De 


hecho, ¡es mejor que lo hagas! 


Darkstalkers 3 (PS1/Arcade) 
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Se complica cuando los fondos tienen áreas más oscuras y más claras. Esta bola puede verse bien frente a la roca, ya que el 


contorno selectivo se mezcla bien con ella. Estos no se ven particularmente bonitos en todas las situaciones. 


por Michafrar 


Descripción general 


o EJE 
+ EEA 


ww 0 Haga contornos selectivos que sean más completos y menos segmentados. 


más pesado 


esquema selectivo 


Encendedor 


esquema selectivo 


Lo que puedes hacer 


O Evite los contornos selectivos por completo. Usa otros contornos. Use 
para evitar problemas: 


O sugerencias de AA y apliquelas a otros tipos de contorno. 


Entonces, ¿qué tiene que ver el subpixelado con esto? 


Puedes tener un contorno selectivo más claro o más oscuro para tus sprites; aunque 
todo depende del fondo. Si los sprites suelen estar enambientes oscuros, tu podrías 


quererdarles un contorno selectivo más oscuro: contornos sombreados con 


píxeles más oscuros de AA para mezclar los bordes con el color de fondo. 


En cierto modo, es como el grosor de línea, pero para los contornos. 


Resultará bastante útil animar 


EE estos contornos con subpixeling. EE 
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Arriba: LOZ: Minish Cap (GBA) Abajo: Iconoclastas (PS4, Switch, PC) 


Dirección 


¿Alguna vez ha mirado animaciones 3D con el suavizado desactivado? Con 
renderizaciones 3D en gráficos de trama, puede ver fácilmente cómo 


las curvas tienen líneas de píxeles deformados. 


Observe cómo, fotograma a fotograma, la punta de la cabeza se encoge a medida que el personaje se mueve hacia abajo. 


Modelo 3D de Pikachu de Pokémon X & Y (Nintendo 3DS) 


Entonces, ¿por qué pasa ésto? Se debe a cómo se mueven las líneas en los gráficos matemáticos. Aquí hay un 


primer plano de una parábola. Para los expertos en matemáticas: lo que está pasando aquí esf(x): x? + n 


A medida que la curva se mueve hacia abajo, la punta se expande. 


Los píxeles de cada fila escapan a los lados. 


En un punto la curva cruza una nueva fila y 


Aparecen nuevos píxeles y el ciclo continúa. 


En la animación, los jaggies no son un problema porque solo los ves durante una fracción de segundo. Sin embargo, 


cuando tu curva apareceuna nueva fila, o se reduce auna fila inferior, evite las transiciones a píxeles individuales. 


Aspirar aal menos 2 a 3 píxelesal hacer estallar formas y líneas 


La animación subpixelada requiere que 


¡voltea hacia adelante y hacia atrás entre fotogramas para comprobar cómo se desplazan los píxeles! 


Esta es la regla general para animar subpíxeles en líneas, curvas y formas. 


MOTION Angle of SR 
E le the line 
=P SUBPIXEL O 


Angle of m movement 
the line = SUBPIXEL 
5 id MOTION | 


La dirección de subpixelado sigue el ángulo de la forma. 


independientemente de hacia dónde se dirija la animación general. 


p.ej. : si el ángulo es horizontal = el subpixelado es horizontal 


si el ángulo es vertical = el subpixelado es vertical 


Puede ver que esta capa está curvada horizontalmente, por lo tanto, también tiene subpíxeles horizontales. 


Se mueve hacia arriba y hacia abajo, pero en ocasiones subpíxeles a la izquierda y a la derecha. 


Tierra roja (Arcade) 


Si te confundes, recuerda este truco con las manos. El pulgar es el movimiento principal y se mueve 


independientemente. Los otros 2 dedos suelen apuntar en la misma dirección. 


Line 
Subpixel 


Line 
Subpixel 


Y 


Motion 


Los píxeles pueden ir hacia arriba o hacia abajo, pero también hacia la izquierda y hacia la derecha según el ángulo 


Esto funciona para píxeles completos o subpíxeles. Concéntrese siempre en el ángulo. 


En los archivos de animación digital (incluidos en este capítulo), puede ver una 


colección de diferentes formas animadas. Busque la carpeta "formas". 
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Por qué 


La animación parece que va en una dirección, pero algunas áreas se mueven en la otra dirección. 


En realidad es una ilusión óptica. 


HAG HAG 


Esta línea se mueve hacia abajo en la pantalla. ... O se movía horizontalmente? 


Veamos cómo se deforman los píxeles en la práctica, observando este sprite deRey de los combatientes XII (Arcade, PS3, 
XB360). Los gráficos de píxeles 2D de ese juego se crearon con la ayuda de modelos 3D. Recuerde que este subpix- 


trucojSolo funciona para dibujos muy juntos! 


Puedes ver el cuerpo completo Sin embargo, cuando hacemos zoom en el cofre, las líneas, las formas y 


moviéndose hacia arriba y hacia abajo. el sombreado parecen moverse hacia la izquierda y hacia la derecha. 


Un nombre que ayude a explicar el movimiento perpendicular podría serondulación; como una 
onda viaja hacia arriba y hacia abajo, pero también hacia adelante y hacia atrás simultáneamente. 
Los artistas a menudo tienen su propio término para las técnicas, así que siéntete libre de darle un 


nombre propio. También podría llamarseondulación. Cualquier cosa que te ayude a visualizar esta 


técnica lo hará:columpiándose, goteando, deslizándose, ¡Tu dilo! 
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El suavizado sigue cada movimiento en su animación. Subpixeling es más o menos deslizar AA 


para crear la ilusión de movimiento. 


SENS 


Este blob tiene un contorno selectivo, pero también AA en el 
interior. Cuando rebota, el contorno se estira a medida que 


sube, lo que hace que aparezcan nuevas filas. 


Por lo general, puede cambiar píxeles completos para sprites con sombreado de celdas sin AA. A medida que introduzca nuevos 


colores, deberá crear subpíxeles en varias rampas de color. A menudo encontrará suavizado en los bordes de las formas. 


Metal Slug 3 (Neogeo) 


Este sprite de elefante está lleno de movimiento; hay tantas 
cosas pasando! Para que sea más fácil de estudiar, vamos a 
echar un vistazo más de cerca a sólola oreja del elefante. 
Hay muchos colores y muchos marcos, así que lo 


simplificaremos con menos AA para que sea más legible. 


Se recomienda usar la menor 
cantidad posible de sombras al 
suavizar para subpixelar. El número 
ideal seria 1 0 2 tonos de AA. Te lo dá 
sólo lo suficiente sombras para crear 


bonitos intermedios 


para tus animaciones. 


A todo color: 5 cuadros de animación donde la orejera se mueve hacia la izquierda. 
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Colores reducidos: las flechas muestran la dirección de los subpíxeles. transiciones más suaves. 


No hay necesidad de crear nuevos 
tonos en tu paleta, 

para 
subpixelar! Incluso sin tonos 
intermedios, aún puede cambiar 
píxeles completos con lo que ya tiene. 


Cualquier color adicional solo haz 


Subpixeling no se trata solo de mover cosas de un lado a otro. Para estos ejemplos, busque 


Soldado A, B y C en la carpeta de animación que viene con este capítulo. Analicemos. 


soldado un soldado b soldado c 

No puedes simplemente desplazar píxeles ¡Ya se ve mejor! Este tiene un desplazamiento 

El desplazamiento de píxeles está 
hacia arriba y hacia abajo tres fotogramas de píxeles de más de cuatro fotogramas y está 

desplazado y las partes del cuerpo siguen 
para hacer que un personaje respire. Este bien sincronizado. Sin embargo, sigue 

un arco. Esta animación también facilita los 
resultado parece rígido. Los cambios de teniendo un aspecto artificial si el personaje 

fotogramas clave extremos. se ralentiza 
píxeles simples como estos solo funcionan simplemente 

hacia abajo en los fotogramas clave. 

para los intermedios. se mueve hacia arriba y hacia abajo. 


No todos los píxeles tienen que moverse para tener un movimiento creíble. 


Con suficientes subpíxeles, no necesita animar cada parte de 
cada fotograma. Puede salirse con la suya si algunas partes del cuerpo no se mueven. 


Algunos píxeles pueden cambiar, otros pueden permanecer congelados o retrasados. 


Lo que más importa es el movimiento. 


Infestación de extraterrestres (NDS) 


Del mismo modo, no es necesario cambiar los píxeles de todas las partes del cuerpo. 


Simplemente subpixele las áreas que se benefician de ello. No tienes que agregarlo a 
todo el sprite. Esta Cangrejo aplastadortiene subpixelado en las piernas y el vientre. 


Sin embargo, su caparazón se mueve normalmente como si animaras 


dibujos regulares. Se duplica para cada cuadro y simplemente se desliza. 


Metal Slug 6 (Arcade, PS2) 


Finalmente, cuánto subpíxel depende de usted. 


Tus personajes pueden incluso tener siluetas que no se mueven. Para los 
movimientos más sutiles, puedes tener píxeles nadando dentro 
el sprite y el contorno no se moverán ni un solo píxel. 
Todo pasadentroel contorno. 


ne it 


Iconoclastas (PS4, PC, Switch) 


Algunos términos de animación han comenzado a aparecer en este capítulo. 


Para comprender verdaderamente el subpixelado, deberá comprender los conceptos básicos deAnimación norte. 203 


Estudio de caso: Capcom 


NENE No todas las animaciones fluidas necesitan subpíxeles per se.Muchas animaciones de 


la época dorada de Capcom no presentaban muchos subpíxeles debido a su gran escala. 
La mayoría de los movimientos se crean fácilmente mediante intermedios simples y 
movimiento de píxeles completos. Sin embargo, a menudo hay movimientos sutiles con 


AA cuidadosamente colocados, y AHÍ es donde encontrarás subpíxeles. 


Darkstalkers 3 (PS1/Arcade) 


Siempre que estos gráficos tenían subpíxeles, estaban algo adelantados a su tiempo. 
Se sabe comúnmente que las animaciones de Capcom se esbozaron primero en 
papel. Aunque las líneas aproximadas se digitalizaron, es poco probable que estos 
subpíxeles sean una coincidencia. Esto es solo especulación, pero al estudiar cómo 
se digitaliza el arte lineal en cuadrículas de píxeles, los artistas de Capcom podrían 
haber detectado movimientos de subpíxeles. Estos efectos fueron totalmente 
intencionales. En SNK Corporation, incluso llamaron a esto la técnica de "0.5 píxeles". 


Jojo's Bizarre Adventure: Herencia para el futuro (PS1/Arcade). 


y 
Observe cómo su pecho se mueve hacia arriba. El ángulo de las lineas/formas es horizontal, lo que significa que los subpíxeles crecen 


horizontalmente, a pesar de que el cofre se mueve hacia arriba. 


Puedes ver diferentes técnicas de subpíxeles en el mismo sprite. 


No todos los movimientos son iguales. 


1.Pecho (respiración): desplazamiento de píxeles + filas emergentes 


2.Movimiento secundario (Viento): AA ondeando de un lado a otro 


A AAAA/Á 


secondary motion breathing Jojo's Bizarre Adventure: Herencia para el futuro (Ps1/Arcade). 
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Legibilidad 


El espectador suele fijarse en el rostro o en los ojos de un personaje a primera vista. Es 
mejor evitar subpixelar las características faciales. Si la forma del ojo se transforma 
demasiado, sobresaldrá como un pulgar dolorido. Si lo subpíxeles, tiene que ser 


extremadamente sutil. 
Chico búho (PC/PS4/Switch) 


Cuando tu personaje solo se mueve 1 píxel, aún es posibledesplazamiento de píxeles 


caras, pero los intermediosse verá muy borroso-incluso a velocidades de cuadro rápidas. 


115535 


Metal Slug 1/2/X (Varios) 


Puede cambiar los valores de píxeles en los intermedios que aparecen en la pantalla con bastante EE 


rapidez. Está bien si estos intermedios se ven divertidos. Después de todo, aparecen en la 
pantalla solo por una fracción de segundo. Lo que NO desea que suceda es que estos cuadros 
aparezcan en la pantalla durante más tiempo. Esto significa animarpose a poseen subpíxeles no 
siempre se garantiza que funcione. animandotodo derechosuele ser más fácil. Esto depende The Legend of Zelda: 
completamente de la confianza del artista. No importa qué técnica se utilice, pa gorra Minish eer) 
creas subpixeles duplicando fotogramas. Una buena solución es tener teclas "favorables" intermedias, es decir, 


mucho más cercanas y similares al fotograma clave. Todo esto se detallará en elpróximo capítulo: Animación. 


Una manera fácil de mantener las cosas consistentes es: 
tener múltiples marcos donde la cara cambia entre 2 posiciones, 
pero la cabeza, el cuerpo y todo lo que lo rodea cambia de píxel. 


Scott Pilgrim contra el mundo: iconoclastas 


El juego (PS3,XBLA) (PC, PSA, interruptor) 


“my, 


El pecho y los hombros 
se desplaza 0,5 pixeles, 


pero la cabeza no. 


Megaman X4 (Sega Saturn, PS1) 


Si tuviéramos que subpixelar la 


cara, no se vería muy legible. 
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Cambios de píxeles avanzados 


Subpixelado con arcos 


Aquí están los cuadros #7 y #8 de esta animación de Aladdin 
lanzando una manzana. El fotograma 7 pasa al fotograma 8 con 
subpíxeles. Este es un claro ejemplo de un movimiento diagonal 
de subpíxeles. La dirección es 45° pero esuna combinación de 


píxeles que se transfierenvertical y horizontalmente. 


Aladino (Megadrive) 


Puede transferir píxeles en diagonal, pero 


no lo piense demasiado. no tiene que ser 


matemáticamente correcto. 


Simplemente mueva el AA aproximadamente hacia 
la dirección principal. Lo que importa es cambiar 


y llevar los colores encima. 


Wargroove (Interruptor, PC, PS4, XBO) 


Lo que desea tener en cuenta es un sentido general de dirección y arcos. La palabra clave aquí es GENERAL. Puede tener 
movimientos retrasados o cambiar arcos. La animación anterior se repite y contiene 6 fotogramas. El subpixelado aquí 


sigue un movimiento circular. Todo esto sucede dentro de un área más pequeña que 3x2 píxeles. 
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Sonic Mania (Conmutador, PC, PS4) 


Cambios intensos de píxeles 


Puede comprender mejor los subpíxeles más difícilesmediante el estudio de sprites renderizados en 
3D.Gran parte de la ubicación de píxeles se genera automáticamente, por lo que nada de esto se 


coloca a mano. Así que depende del artista (y de nosotros) desenredarlo todo. 


originales en 3D 


HAG 


Simplificado 


Es importante establecer extremos: esos son fotogramas clave donde el movimiento comienza y se detiene. 


Los fotogramas intermedios son aquellos en los que tendrás que jugar con los subpíxeles. 


COCOS 


extremo intermedios extremo 


Ciertas animaciones inactivas en 2D pueden parecer increíblemente complicadas o ni siquiera subpixeladas. 
manualmente. Todavía vale la pena estudiarlos.Identifique primero los marcos extremos; 


averiguar en qué dirección cambiarán los intermedios más tarde. 


Algunos de estos efectos llevan el desplazamiento de píxeles al límite. casi se convierte 


tan artificial que a algunos les puede costar creer que está hecho a mano. 


por el artista invitado Cocefi 


Más usos del subpixelado 


NENE Ocasionalmente, las animaciones tienen siluetas que APENAS se mueven. Si 
se mueven, solo se moverán un poco. Todo el movimiento tiene lugar dentro del 
sprite. Esto significa que es imposible utilizar la herramienta de papel de cebolla 
en los programas de animación. 


Metroid Zero Mission (GBA) 


Sacudida estremecerse 
Dormido Risa 
Efectos de viento estar aturdido 


luces parpadeantes temblando de frio 


Tambaleándose y sacudiéndose Movimientos asombrosos 


Poderoso Switch Force 2 (WiiU/3DS) 


No siempre puedes usar AA cuando trabajas con pocos colores. En su lugar, haga que los píxeles completos naden dentro de la 


duende. El principio es el mismo que cambiar los subpíxeles, pero con píxeles completos. 
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Súper Metroid (Super Nintendo) 


TAG 


A veces completamente completolos píxeles viajan a través del sprite 
como si estuvieran nadando.Aún puede cambiar colores y píxeles con 
AA, pero recuerde usar colores que ya tiene dentro del sprite. 


No cree otros nuevos a menos que sea absolutamente necesario. 


Ash de Iconoclastas (Switch, PC, PS4) 


Buscar "Ceniza" en la carpeta de animación que vino con este capítulo. 
Encontrará un desglose completo de cada cuadro y todos los subpixeles. 
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Caso de Estudio: Niño Búho 


niño búho-lanzado en 2016: presenta el arte y la animación de Simon Andersen, un desarrollador de D-pad Studio. 
Owlboy es una maravilla visual y presenta numerosos ejemplos de subpixelado. 


Analicemos algunas de estas animaciones fáciles (pero complejas). 


La animación inactiva de Otus tiene 2 fotogramas clave. 


A es el punto más bajo del ralentí. B es el punto más alto. Estos son los extremos. 
Aparte de ser1 píxel más alto, el cuadro B es casi idéntico al cuadro A. Si esta 


animación fuerasolo 2 cuadros de largoesosería bastante entrecortado. El 


subpixelado se utiliza para suavizar esta transición. 


A entre B entre A 


LL 


La animación completa tiene aún más intermedios. Estos no son intermedios directos "en el medio". Estos 


Ahora he incluido los intermedios rectos. 
Dado que el personaje solo se mueve 
hacia arriba 1 píxel, es más difícil 
encajar en un punto intermedio. Es por 
eso que se usa el subpixelado. Observe 


cómo la nariz cambia de forma. 


unos favorecen los fotogramas clave A y B. Son mucho más parecidos e idénticos a estos fotogramas clave. Se Ilama 


facilitandoen la animación tradicional. Mostraremos esta técnica con más detalle.en el Capítulo 9. 


Oo a 
“9 Han 


favoured Straight easing 


in-betweens in-between even spacing 
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Aquí hay un desglose ee de cómo se anima el ie 


Straight 


oe beter key me 


0088 


T moves up 
Ato E 


straight 
eed 


demos don | 
E backto A TET A 3 
e ‘chart, movement 
Key 
A 


timeline down keyframe — inbetween 


up os inbetween 


jisi 


Los subpixeles solo aparecen en las áreas más pequeñas. 


este duende demandolinaestá animado de manera regular pero aún presenta subpíxeles. 


Observe cómo el botón de su vestido deja un rastro a medida que viaja de un lado a otro. 


el cuello tiene = + = 
dividir píxeles también! 


Cuando su rostro se inclina, comienzan a aparecer píxeles cuidadosamente desplazados y suavizado 
No se sabe si el artista utilizó un atajo de rotación, 
pero puede ser un truco útil que tú mismo puedes usar. Vuelve a leer el capítulo sobre limpieza 


+AA how it appears +AA how it appears 
Rotated + pixelshift in-game Rotated + pixelshift in-game 


ZO 


Algunos consejos más 


Los contornos pueden crecer píxeles adicionales 


Er Be 
A veces, puede agregar píxeles o eliminar pixeles en 


las esquinas redondeadas para que las animaciones se LS £ 
I —» lt q para q 
muevan aún más. Te ayuda a agregar movimiento 
extra a tus sprites. ¡Usa esto con moderación! w 
Emblema de fuego: Blazing Blade (GBA) 
Subpíxeles rápidos pero baratos 


Arápido pero poco fiableforma de generar subpíxeles: 


1. Reducir y bloquear los colores del sprite. 

2. Cambiar el tamaño 200%, sin desenfoque (vecino más cercano) 

3. Seleccione todo, mueva el sprite 1 píxel (horizontal o vertical) 

4. Cambie el tamaño al 50%, por lo que vuelve al tamaño 1x, pero esta vez con el desenfoque habilitado. 


Cuadro inicial Que desorden borroso limpiar 


BEAR 


Wargroove (Interruptor, PC, PS4, XBO) 


Recuerda: Pixel art se trata de tener un control total sobre tu trabajo.Este método es bastante económico y no 
funcionará a menos que lo edites manualmente. Está bien para los principiantes que quieren entender mejor el 


cambio de píxeles.Sin embargo, es una buena referencia.no garantiza un intermedio para las animaciones. 


Subpixelado + Sombreado en movimiento 


Es muy fácil confundir subpíxeles con "sombreado animado", pero eso es 
incorrecto.Si cree que es un sombreado que simplemente se mueve, solo 
confundirte aún más. Se trata demovimiento, no sombra y luz. 


Ataque de babosas metálicas (móvil) 


NO se exceda en los subpixeles 


Tendrás que tener mucha confianza para realizar los movimientos más sutiles. Si te excedes, parecerá que las cosas se están 


derritiendo o parecerán gelatina. Además, el subpixelado requiere mucho tiempo. No lo hagas si no lo necesitas. 
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Conclusión 


rra 


Duplique marcos y cambie píxeles. Eso es subpixeling en pocas palabras. Es la Única técnica para intermedios a 
pequeña escala. Es posible crear subpíxeles simplemente duplicando y desplazando un solo sprite. 


4 i TEs una técnica en la que al cambiar ligeramente el color de los pixeles circundantes, 


para el ojo humano, parece que los píxeles se mueven alrededor de 0,5 píxeles. A A 


Kazuhiro Tanaka 
Diseñador de Metal Slug en SNKi 


El subpixelado es la técnica menos documentada en pixel art. 
Conociendo este hecho, aprovecha cada oportunidad para descargar los sprites que encuentres y estudiarlos más de cerca. 


Esa es la mejor manera de aprender esta técnica. 


Comida para el pensamiento Imágenes fijas Animación 
Introducción Grosor de línea Dirección 
Cuando cómo Dividir píxeles Movimiento 

Cambio de píxeles engañando al ojo Legibilidad 
contorno selectivo Cambios de píxeles avanzados 


Algunos consejos más 


Si usted essd/oun ilustrador, Lógica de pixelesLa sección de grosor de línea le resultará muy útil. Si eres un animador, es posible que hayas notado que 
se mencionaron brevemente algunos términos y técnicas. Siéntase libre de darle otra lectura a este capítulo una vez que haya terminado el libro o 


comenzó a aprender animación. Las cosas comenzarán a tener más sentido cuando ya sepas cómo animar. 
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¡Tanaka profundizando en la "técnica de 0,5 píxeles" utilizada en SNK. fromWeekly Famitsu 9 de agosto de 2018, n°1547, traducido por Alistair Wong en siliconera.com 


[81 Traducido del inglés al español - www.onlinedoctranslator.com 


Introducción 


Ser Animador 2D es como ser bilingue: 
Los dos lenguajes que necesitas saber son dibujar y animar. Agregue 


pixel art a la mezcla, y ahora tiene tres. Ahora eres trilingue. 


La animación ya es una forma de arte bien documentada. 
La animación moderna es mucho más antigua que el pixel art, por lo menos un siglo entero. Los 12 principios de la animación que 


sabemos que hoy datan de la década de 1930. En este capítulo nos centraremos específicamente en la animación de juegos. 


Sin embargo, no te preocupes. Te daremos un curso intensivo de animación básica. 


ZUCHARD MUNS 


TO FPAWED ROGER page 


Como muchos otros, mi primer consejo es adquirir el siguiente libro: 


El kit de supervivencia del animadorporicardo williams 


La razón por la que este es uno de los mejores libros es porque R. Williams analiza 
los conceptos básicos del movimiento y la actuación. Recomiendo encarecidamente 


la versión para iPad del libro, ya que presenta partes animadas. 


Dos de los animadores que han inspirado a Williams son Ollie Johnston y Frank 
Thomas. Estos dos animadores clásicos escribieron “Animación de Disney: La 
¡ilusión de la vida". son dos de losnueve viejosquien estableció los 12 principios 


de la animación que conocemos hoy en día, en la década de 1930. 


Estos dos libros enseñan todo en términos de técnicas tradicionales de dibujo a mano, pero los principios 
que cubren se aplican a todas las formas.Si quieres mejorar en la animación, considera expandir tus 


horizontes. No te limites al pixel art.¡Dibuja, pinta y anima de otras formas! 
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Como estudiar 


Si alguna vez te sientes perdido, recuerda que la animación es laestudio de movimiento. Esta no es la 
definición de animación de un libro de texto, pero le recordará en qué debe concentrarse en caso de 
que tenga dificultades. Esto significa estudiar el movimiento de criaturas, objetos y fuerzas. Este 


estudio incluirá tanto movimientos realistas como exagerados. Un animador estudia con frecuencia la 


vida real, pero también tiende a encontrar inspiración en medios previamente animados. 


Una buena animación se basa en fotogramas clave legibles. 


Los dibujos fuertes son cruciales. 


Si sus fotogramas clave son demasiado parecidos, es más difícil para E"Plema de fuego: las piedras sagradas (GBA) 


la audiencia ver lo que está sucediendo. Más intermediosnoarreglar la 


animación. No importa qué tan suave sea el movimiento, el 


movimiento no parecerá convincente. El uso eficiente de fotogramas 


e 


clave permitirá una animación más atractiva. 
En elLEGIBILIDADyLIMPIARcapítulos, vimos cómo las 


siluetas fuertes son visualmente más impactantes. Con 
intermedios, por lo que debes jugar bien tus cartas. la animación, este principio es inclusomáscrucial. 


Pixel art ya te ofrece poco o ningún espacio para los 


Es importante que la animación de tu sprite se vea bien, pero incluso para que bien. 


Sea analítico. Rara vez encontrará un tutorial exacto paso a paso para algo que 
necesita. Puede sonar bastante desafortunado, pero no lo es. Lenguaje corporal, 


actuación, expresiones, estilos; ¡Todos estos son geniales para estudiar! 


Cuando encuentres una referencia, ya sea de la vida real, una película, un juego o una animación: 

1. Examine cuadro por cuadro. 

2. Encuentra los extremos. Son fotogramas clave donde los dibujos se encuentran en su 
posición más extrema, normalmente justo antes de un cambio de dirección. 

3. Utilice los extremos como guía. Dibuje los dibujos intermedios y desglosados 
usted mismo, en lugar de copiar el metraje exacto cuadro por cuadro. 


4. Estilelo (a menos que las poses ya estén demasiado enfatizadas). 


Al hacer esto, deconstruyes la forma en que funciona el movimiento; ayudándote la próxima vez que animes algo. 
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Líneas de tiempo en software 


El tiempo es la velocidad de las acciones que suceden en la pantalla. En animación, esto se refiere a cuántos dibujos o fotogramas se 


utilizan para mostrar una acción. Sin embargo, las líneas de tiempo son un poco más complicadas con diferentes velocidades de cuadro. 


Animación en Uno = cada fotograma es único, 1 fotograma es 1 dibujo 
Animación en Dos = fotogramas se duplican, 2 fotogramas son 1 dibujo 


Animación en Tres = fotogramas se triplican, 3 fotogramas son 1 dibujo 


... puedes tener cuatros, cincos. La lista continua. 


Dependiendo del software o tema utilizado, estos se verán diferentes, pero siempre los reconocerás. 


12345 é 7 $ 93 W 11 dè 13 14 18 16 47 45 19 20 21 22 23 24 

Ones @@CCC88CBBBSBB8eeSeeeeES 

Tuv: MED WD Ff FF Ff €P 4 0 yf yy YT 

Three's « ole ole ole ole ole ole ole o) Thee i 2 SHEN Ga Ga Ga Gua 
Adobe Flash/Animar aseprita 


One's 
Two's 


AA Go 
S O f 5 


12 34 5 1 9 10 11 12 
ello ola falo folafola] 
= ole ole oje oju ole yl 
la e oje od dl 


Aseprite (piel personalizada) pintura de televisión 


Pintura de estudio de clip 


Sin embargo, la animación 2D nunca es tan constante. Los marcos están en la pantalla durante diferentes períodos de tiempo. 


La animación mezcla cuadros de uno, dos y más largos. 


aseprita GráficosGale Adobe Photoshop 


u (DARSE AOADA 80m 


movimiento profesional 


Con estas líneas de tiempo, deberá establecer su duración manualmente para convertirlas en dos o tres. No amplía su 


duración agrupando los fotogramas en una línea de tiempo, sino configurando su duración individualmente. 
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Que tan rapido aparecen los dibujos 


Aquí hay algunas referencias para ayudar tanto a los animadores tradicionales como a los desarrolladores 


no rte de juegos. Por ejemplo, si tiene "dos" a 24 fps, se sentirán como 12 dibujos por segundo. 


Estándar de animación de video 


Estándar de animación de juegos 


24FPS 60 FPS 30FPS 
Unos [.] 2A dibujos por segundo GOdibujos por segundo 3/0dibujos por segundo 
dos la ol 1 2dibujos por segundo 30vibujos por segundo 1Bdibujos por segundo 
tres 8dibujos por segundo ZOdibujos por segundo 1Odibujos por segundo 
dibujos por segundo 1 Bdibujos por segundo 0 


La longitud de cada fotograma. 


La forma en que los diferentes softwares indican el tiempo puede variar. Para ayudarlo, estos son los números que necesita 


para saber cuánto duran los "unos" y los "dos" si está acostumbrado a las notaciones de "24FPS" o al juego de "60FPS". 


ETE de TED de video =n 


Estándar de en de juegos 
dibujos i APA, 
i a 0 PS Duración en juego 


por segundo 


/ 60 eaa aks 

/ 30 sears Dace 
en uno 0.04.es.nio 24 / 2er 

/ 20 Pon a 

/ 15 eee 4 marcos 
en dos nies 12 pee sae 

/ 10 gos Ommarcos 
en tres 0.12 8 7 78 marco 
Sn cuatro OA Tanne 6 ee WD rors 


Recordar:Estos números se redondean hacia arriba o hacia abajo para que sean más fáciles de recordar. 
0,01 segundos =1/ 108de un segundo = 1 centisegundo. Los milisegundos soni/aga gin segundo 
Si su software solicita milisegundos o centisegundos, utilice los números que aparecen a continuación. 


0.1 segundos 
100 milisegundos 


0.0 2segundos 


dieciséismiicsegunios 


0.04 segundos 
42milisegundos 


0.O5segundos 
50 milisegundos 


0.O6segundos 
50 milisegundos 


0.08segundos 
83 milisegundos 


0.1 2segundos 
125 milisegundos 


0.17segundos 
167 milisegundos 


0.03segundos 


33milisegundos 


Frame Properties GALE ; ae. 
Frame number: 1 Delay: a 000 sec z] z = z = 

AA S 
Duration (milliseconds): [50 || [80 = PEREZ, 


aseprita GráficosGale 


movimiento profesional 


Técnicas clave 


Compresión y extensión 


Acechadores oscuros (PS1 Arcade) 


Este es el más intuitivo. Los principiantes lo saben bien antes de empezar a animar. Hace que las animaciones sean más 
animadas y muestra el peso y el movimiento de varias criaturas y objetos. De hecho, la pelota que rebota es una de las 
primeras lecciones que aprenden los animadores para familiarizarse con las técnicas de squash y estiramiento. La 


cantidad que aplastes y estires depende de qué tan fuerte o sutil sea el movimiento. Otro factor es cuán pesado y denso 


es el tema. Asegúrese de saber cuándo adherirse al modelo y ZN subtle 
cuando no perder el control. Tenga en cuenta: necesita conservar {ay 
m O »- 


la masa del objeto. Si aplasta algo en altura, también debe 
Ataque masivo de Kirby (NDS) 


estirarlo en ancho. En resumen: conservar el volumen. 


Anticipación = 


La anticipación es el “COLOCAR" parte en 
"Listo...Colocar... ¡Vamos!" 
Es el momento en que preparas una 
acción, por sutil o extrema que sea. Dices 


lo que vas a hacer y luego lo haces. 


a start anticipation oom 


Phantasy Star II a Drive) 


La anticipación es crucial para la animación 
limitada. A veces un cuadro es suficiente. Lo que le 


muestras a tu audiencia es energía acumulada. 


“Tú no ves, pero túsentireso" 


más amenudo OPUESTO 


Mantener la expectativa por los videojuegos generalmente corta o inexistente. Si desea que 
las animaciones se reproduzcan tan pronto como presione un botón. Si la animación es 


meramente cosmética o necesita un poco de preparación, asegúrese de agregar una buena 


anticipación. 


218 


Castlevania Sinfonía de la noche (PS1) 


Esto también se conoce como/a posición de paso. Un nuevo fotograma clave que hace que la animación cambie 
de rumbo. Piense en ello como una ruta alternativa o un cuadro clave medio.Para ir de A a B, ¡puede darle más 
sabor! Tome esta escena de la película de acción en vivosu chica viernesde 1940, El actor Cary Grant está 


señalando. ¿Cómo te lo imaginas para ir de A a B? La forma más rápida sería simplemente levantar el brazo. 


En cambio, el actor cambia de dirección y crea un arco con su brazo. Este 
movimiento hace que su forma de señalar se sienta severa, más autoritaria. 


Esta es solo una de muchas posibilidades.Puedes tener TODO tipo de averías. 


breakdown key 


Animación de giro de Alucard - Castlevania Symphony of the Night (PS1) 


Los desgloses permiten a los animadores agregar variedad y características únicas a sus 


breakdown 


fánatadas 


Prisionero de guerra rescatado - Metal Slug (Arcade, NeoGeo) 


animaciones. En lugar de ir de A a B, vamos de AXBPh eTRit de supervivencia del Animador, el 


octavo capítulo del libro habla de la flexibilidad. ¡Williams entra en detalles sobre las averías! 


la gomatalleres de carretera y videos de Toniko P antoja. 


Vista previa de vídeo: 


youtu.be/wdPbiy-8BRo 


Taller de carretera de goma: 


gumroad.com/stringbing 
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Facilidad de entrada y salida 
Facilitar la entrada y salida de la animación es exactamente igual que C] C] C] C] O 


con la animación 2D normal. No hay gran diferencia al principio. C] C] 
easing even spacing 


Easing significa que los intermedios favorecen el fotograma clave. 


En pocas palabras: es aceleración y desaceleración. Acelerando y desacelerando. 


Street Fighter III (Arcade, DC) 


Puede ver que cuando todos los marcos se ven al mismo tiempo, los intermedios más cercanos son los que se abren y 


cierran con facilidad. Las entradas y salidas lentas son vitales para lograr movimientos naturales atractivos. 


Easing y subpixelado 


Cuando decide transformar libremente y mover partes, 1 px es la distancia mínima. El Unico aspecto exclusivo del 


arte de píxeleses que si desea colocar intermedios MUY cerca del cuadro clave, se utiliza el subpixelado. 


SSSSssseee ss 


Iconoclastas (PS4, PC, Switch) 


Las entradas y salidas lentas con subpixeles tienen fotogramas clave muy juntos. 


De hecho, puede simplemente copiar y pegar el cuadro mas cercano y modificarlo. 


El subpixelado se utiliza para estos fotogramas en particular. 


Tabla de tiempos: 
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Silos gráficos de tiempo de animación anteriores son difíciles de leer, 


considere lo siguiente: en ambos casos, el cuadro 2 favorece al 1 y el cuadro 


“a 


a 


4 favorece al 5. Están más cerca entre sí que al cuadro 3. Cuando el espacio 


entre ambos dibujos es muy cercano ,es cuandonecesitarás subpixel. 
| 2 3 4 2 3 4 
1 -5 1 5 


MarcoA*es un duplicado deApero editado con subpixelado. Este intermedio ayuda a facilitar la entrada o salida del 


personaje en el fotograma clave. Igualmente,B*es un duplicado deBpero ligeramente desplazado en píxeles también. 


El subpixelado solo se utilizará para entradas y salidas lentas y para los movimientos más sutiles. En lugar 


Az 


Ataque de babosas metálicas (móvil) 


de querer exprimir subpíxeles en todas partes, trabaje PRIMERO en fotogramas clave fuertes. 


Mover presas 


Tierra roja (Arcade) Key LY OLY 
NE YY, 
CLS 


Estos son movimientos donde la acción se detiene, pero el personaje sigue moviéndose lentamente mientras mantiene la pose. Las 


retenciones en movimiento son extremadamente raras en el arte de píxeles, ¡porque aumentaría exponencialmente la cantidad de 
cuadros únicos!Más fotogramas significa más almacenamiento en la memoria, por lo que rara vez los verás en los 


videojuegos más antiguos.Considera esta técnica como una forma de relajarte al máximo. 


En el apéndice se pueden encontrar dos versiones de estemantener en movimientoanimación. UNE 


Un habitualsosteneres cuando los personajes "mantienen una pose". Esta no es una animación inactiva. 
pero simple el personaje que se detiene. Nada se mueve, por lo que es tu trabajo enfatizar otras 


partes más pequeñas que se mueven en un cuerpo para mantenerlo vivo y en movimiento. 


Avance sónico (GBA) Para obtener más información sobre las retenciones, consulte la sección "Seguimiento". 2 J 1 


Las manchas son intermedios que imitan los efectos del desenfoque de movimiento. 


Chico búho (PC,PS4,Switch) 


frotis alargados 


Este es un intermedio extendido. Se utilizan para 
mostrar un desenfoque de movimiento en un solo 
cuadro. Conecta dos fotogramas clave juntos. Estos 


marcos no deben permanecer en la pantalla por 


mucho tiempo. Suceden tan rápido que no siempre se 


- puede decir que existen. Son un truco visual. 
Street Fighter III (Arcade, DC) Maestros marciales (solo arcade) 


Hoja de unión de emblema de fuego (GBA) Chico búho (PC,PS4,Switch) Iconoclastas (PS4, PC, Switch) Street Fighter III (Arcade, DC) Chico búho (PC,PS4,Switch) 


es mejor tenerfrotis animados en uno a 24 fps(o alrededor de 0,05 segundos). 


múltiplos 


alargados. Son manchas que multiplican objetos. Estos funcionan tan bien 


Manchas con imágenes secundarias. Son una versión alternativa de frotis e 


A 


como los frotis alargados. Depende de usted sentir lo que funciona mejor. 


' Marvel vs Capcom 2 
Boogerman (Mega Drive) (Arcade, Dreamcast, +) 


funcionan mejorcon ciclos de bucleque los frotis extendidos. 


OF OF re: 
/ = 


Mario&Luigi Bowsers Inside story (NDS) Fuerza Dragon (Sega Saturn) 


En el capitulo 5, hemos visto juegos contramadose desdibuja en raras 
ocasiones. Este método esahora obsoletoy lo hariaso/otrabajar en televisores de 


tubo CRT. No es muy eficiente hoy en dia, asi que trate deEvitales. 


222 La Máscara (Super Nintendo) 


sobreimpulsos 


NENE Street Fighter Alpha (Arcade, PS1) overshoot settle M evTrame Lait 


Los rebasamientos son fotogramas en los que la parte que estas animando pasa mas alla de su destino, solo para volver al 
fotograma clave. Es un tipo de retroceso, como un resorte estirado que regresa a su estado predeterminado. Richard 
Williams llama a estos “acentos duros", pero en la industria moderna llamamos a esto “excederse”. A veces, un par de 


intermedios colocan al personaje en la clave, otras veces el sobreimpulso se ajusta sin intermedios. 


Puedes variar el impacto. A veces es suficiente tener un sobreimpulso que mueve una parte del cuerpo en solo 1 píxel. 


Puede que no lo veas, pero puedes sentirlo. 
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smeared 
overshoot 
Marvel vs Capcom 2 (Arcade, PS2, Dreamcast) Mickey Manía (Mega Drive) 
Algunos excesos se pueden combinar con manchas. Uso de sobreimpulsos exageradosaplastar y 
Esta mancha llegará más allá del fotograma clave. estirar. Todo el cuerpo también puede pasarse. 


Recuerde que los sobreimpulsos no solo ocurren en dos dimensiones. La 
perspectiva siempre se aplica, incluso con objetos 2D. 


Woody Salvaje (Sega Saturn) 


Los overshoots ayudan a dar a tus movimientos un buenquebraromúsica pop. 


tiza 


Mini mezcla de Pocket Fighter / Super Gem Fighter (Arcade, PS1) 


Superposición y seguimiento 


Acción superpuesta 


Algunas partes de los objetos o cuerpos lideran todo el movimiento. A medida que 


se mueve, otros segmentos los seguirán. Una parte conduce, las otras siguen. 


AAAAAS 


Acciones superpuestasson todas las partes u objetos que siguen con retraso. Cuando se 
complete la acción, las piezas seguirán moviéndose. Este es elseguir adelante. Estos efectos se 


aplican acualquier cosa tiradapor una fuerza exterior. Este no es un movimiento secundario. 


. Este personaje, A/fonso, tiene dos partes diferenciadas. 
leading movement 
Se superponen en diferentes momentos. Los brazos y la 


following part 
(delayed) 


cabeza lideran el movimiento, mientras que el torso los 
sigue con un ligero retraso. Las piernas simplemente no 


se mueven en absoluto. 


Chico buho (PC,PS4,Switch) 


Los movimientos superpuestos pueden ser mas simples que el ejemplo anterior. 


Lo mejor es planificar primero la animación, ya sea simple o dificil. 


Comience siempre con su acción principal y 


dibuje las siguientes acciones más tarde.. 


SE 
USE E, AE A A A A 


Maestros marciales (solo arcade) 


Píxeles superpuestos 


Es fácil perder la noción de los subpíxeles, así que planifique su animación con cuidado. 


Además, podemos aplicar este principio 
de animación a un área pequeña con 
píxeles individuales superpuestos. 
Cuando se mueve 1 píxel, los otros 


toman uno o dos fotogramas para 


ponerse al día. Ellos sondemorado. 


Planeta de la Libertad (WiiU, PC, PS4, Switch) 


Los subpíxeles también pueden extender la animación. Se 
pueden utilizar como acciones superpuestas en forma de píxel. 


Poderoso Switch Force 2 (WiiU, N3DS) 


BIPIE 


Tener que retrasar los píxeles aumentará el número de fotogramas y dará la impresión de más movimiento. Al 


igual que los subpixeles, te da más espacio para animar. De hecho, está subpixelando conenteropíxeles! 


cuadro 1 cuadro 2 cuadro 3 cuadro 4 cuadro 5 


Llamemos a estos 


píxeles retrasados 


Alternativamente, puede extender los píxeles para unirlos. Sin embargo, esto puede destacarse 
como un pulgar dolorido. Siempre reproduzca sus animaciones para ver si se siente bien. 


cuadro 1 cuadro 2 cuadro 3 cuadro 4 cuadro 5 


Eo. y 


mM Llamemos a estos 


píxeles elásticos 


, ES Por el artista invitado Danieru 
tener formas limpias de 45°, pero la transición terminará siendo más suave. 


d Si desea animar formas de 45° con subpíxeles, es mejor no tener AA. Es 


Ataque de babosas metálicas (móvil) 
Si tiene formas con contornos o suavizado, las cosas se pondrán MUY desordenadas a 45°. 


Af 06 LLL 


pixeles retrasados (AA) pixeles elasticos (AA) 


mucho mas limpio tener pixeles superpuestos. Los marcos por si mismos no 
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Seguir adelante 


Follow-through 


El cabello de Zero sigue después de que corta. Reacciona a su movimiento recostándose (Megaman X4 (Sega Saturn, PS1) 


Los seguimientos añaden movimiento extra a tus personajes y objetos. Hacen que los 
movimientos sean más realistas. Si trabaja con marcos limitados, también puedendar la 


HAG 


ilusión de que hay más movimiento del que realmente hay.Estas partes continúan 


moviéndose después de que se completa la acción, de ahí el nombreseguir adelante. 


Este sprite de Batman incluso tiene un poco de subpixelado en el seguimiento de su capa. Es 
bastante impresionante para un sprite de NES, pero también poco común. Los seguimientos pueden 
Batman (NES) requerir algunos subpíxeles para obtener un final suave y agradable. Esto ayudará a que la fase de 


"establecimiento" de la animación sea aún más convincente. 


overshoot 


anticipation 


Follow-through 
Ataque de babosas metálicas (móvil) 


Resumen 


Main/Action HeldidrawingleyActionjhastended 


Overlap Follow-through 
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Los cuatro métodos 


Al igual que en el capítulo de introducción, hay varias formas de comenzar un dibujo fijo. Sin embargo, la animación de 
píxeles conoce 4 métodos utilizados para llegar de principio a fin. Estos métodos tratan sobre cómo se construye el arte de 


píxeles, más específicamente, los dibujos preliminares para cada cuadro seguidos del proceso de limpieza. 


a 
E 
Silueta Reciclaje Empezar desde Simple 
animación marcos Tradicional Arte lineal 


Por supuesto, los dos (o tres) métodos de animación tradicional obviamente todavía se aplican al pixel art. 


Postura a pose:planificar su trabajo con fotogramas clave, agregando intermedios para conectarlos. Todo 
derecho: fotogramas animados a medida que avanza, improvisando su camino a través de la línea de tiempo. 


Pose a pose + Todo recto:Una mezcla de ambos métodos. 


Las siluetas son útilespara grandes movimientos 


por Michafrar 


La forma en que garabateas tus siluetas depende de ti. Si dibujas tus siluetas 
como un dibujo regular, ¡eso es igual de bueno! Esta técnica esmás sobre la 


formaque en realidad ser una sombra. El resultado final es lo que importa. 


Las siluetas también pueden ser manchas de colores planos. 


Esta técnica funciona bien para planificar su animación. Esto te 


ayuda a realizar un seguimiento de los colores de tu personaje 


desde el principio. Puede modificar, reutilizar o retocar piezas 


: en cualquier momento. 
Por el artista invitado YAA 
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Marcos de reciclaje 


Borrador 


Reciclar es útilpara mantener un estilo consistente y para mantenerse en el modelo 


ana 
ih 


a aA ‘A 
AAA 


por el artista invitado Syosa 
9 
ao \ Una vez más, la herramienta de selección es tu mejor amiga del pixel art. Con esta herramienta 
` \ 
\ p 
ane --8 puede usar y COMBINAR las siguientes cosas para ayudar a dibujar nuevos marcos: 
b- 
al 
Proceso de copiar 


Cambiar el tamafio Corredizo 


Giratorio 


ien 
t-q 


sesgar 
Al analizar hojas de sprites y animaciones en línea, puedes notar que el pixel art tiene marcos 
que reciclan muchas partes del cuerpo. Puedes ver algunos marcos modificados 
L I 
b -d 


No hay necesidad de volver a dibujar todo desde cero con pixelart. Una vez 


que tenga un dibujo de píxeles base sólido, ese sprite se convierte en su 
o recurso principal. Duplicar sprites y modificarlos te ahorrara tiempo 


Poderoso Switch Force 2 (WiiU/3DS) 


Metal Slug 3 (NeoGeo, PS2, Varios) 
Lo básico es aplastar, estirar o deslizar piezas. Una vez que domines estas técnicas, podrás combinarlas. En 


lugar de dibujar un nuevo marco, puede obtener marcos realmente complejos sesgando y rotando. Las 
cosas se verán difíciles, pero eso se debe a que todavía tienes que limpiar el sprite 


ge 
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Metal Slug 3 (Arcade, Neo Geo) 
Trrata de descubrir cómo ahorrarte algo de tiempo con un reciclaje inteligente 


Seleetion 
tool 


frame A frame A "transformed" frame B por Michafrar 


p SIN EMBARGOla parte importante es trabajar lo suficiente en los marcos transformandolos y 


transformándolos en frankenstein para que se vean distintos de los demás. 


NO puede simplemente deslizar partes del cuerpo y dejarlo así. Si no los edita, sus 


personajes se verán robóticos o como "interpolados". 


Este método es comparable a la técnica de "Place and 
Trace" utilizada en la animación 2D tradicional*. 


Combine tanto la silueta como el 
método de reciclaje para crear 
espacios intermedios mucho más 
rápidos. Esto requiere más limpieza, 
pero obtendrá una idea de la 


animación final mucho antes. 


Wargroove (PC, PS4, Switch, XBO) 


Aa 


Siento que con la animacion de estilo de silueta, todo deberia moverse a la vez, como los 
movimientos de un caballo corriendo. Reutilizar marcos es conveniente para mostrar Y 


equeñas expresiones y gestos humanos. Yo uso estas dos técnicas. 
ped P yg Syosa/L&& 


Esta técnica va de la mano con el "Marcos de reciclaje'método. 


¡Puedes combinar métodos! 


¡Con un poco de experiencia, puede acelerar su trabajo enormemente! 


+ Colocar y rastreartambién llamadocambiar y rastrearo incluso/evantar y rastrear) es una técnica en la que los animadores 2D tradicionales utilizan un marco previamente dibujado como guía para dibujar en b entre 2 2 9 


o nuevos fotogramas clave. Este dibujo se coloca debajo de un marco en blanco para que pueda ser calcado o transformado libremente. Esta técnica ayuda a que los objetos, las características y los personajes permanezcan uniforme. 


Muchos se refieren a Capcom cuando hablan de esta técnica. 


En el pasado, los artistas 2D de Capcom usaban papel cuadriculado para animar a 
los personajes y luego digitalizar y colorear los marcos en las computadoras. 
Varios estudios harían uso de este método. Algunas empresas emplearían la 
ayuda de animadores 2D externos; otros trabajaban internamente. La forma en 
que cada estudio digitalizó sus cuadros de animación fue diferente, pero el 
proceso principal siguió siendo el mismo que se coloreó primero con los sprites de 
Earthworm Jim. Al estudiar muchos de los escaneos y las imágenes beta, puede 


notar que los dibujos se modificaron durante la fase de pixel art. 


Hoy en día, todos los bocetos preliminares se hacen en computadoras. 


: Y ! sin desenfoque 
(A 


Arriba: Darkstalkers (Arcade, PS1) Derecha: Street Fighter III (Arcade, Dreamcast) 


Esto se refiere a la forma tradicional de animar en papel o softwares 


comoAdobe Photoshop,Adobe Flash, Armonía de TVPaint y Toon Boom. 


Hoy en día, esta técnica consiste en: 
- Primero,Animación de dibujo en alta definición. 
-= Entonces,reduce los marcos a un tamaño compatible con píxeles. 


- Por fin, rastrear o editar los fotogramas de la animación. 


© — 
Reduciendo Y == Hasta el Afila r 
=—— 4. 
colores 8-8 contraste filtrar 


Una vez optimizadas las imagenes,todo es limpieza a partir de ahi. Después de todo, el pixel art se trata de tener control. 


Si necesita crear una cantidad extrema de animación, una posibilidad es crear 
primero modelos 3D. Los resultados creados con estos modelos todavía se 
consideran pixelart, ya que aún requieren la habilidad y el conocimiento del 
pixel art durante la fase de limpieza. Un juego muy conocido con esta técnica 
esF/ rey de los luchadores XI, pero puedes encontrarlo en juegos más antiguos 


comosónico 2,Mickey Maniay Kirby superestrella. La empresa Obras del sistema 


de arcouse modelos 3D para crear sprites con juegos como One Piece: Gran 


Coliseo Pirata, Dragon Ball Z: Extreme Butodery el Blazblueserie. One Piece: Gran Coliseo Pirata (N3DS) 


Si está interesado en saber cómo digitalizar aún más su trabajo, consulte el 


maravilloso sitio:2Dwillneverdie.com que se especializa en este método. 


Ya hemos hablado del método tradicional antes. Echa un vistazo a estas páginas anteriores: 
LLL, 


Introducción Legibilidad Limpiar 
Entonces, ¿por dónde empiezo? págs. 8-9 De ásper Oa limpio pag. 164 
Símbolos I - Manos #6 pag. 98 a . 
Hardware de la vieja escuela pág. 11 De principio a fin - I pág. 182 


o 
ie 


Esta técnica es sencilla: es lo mismo que la animación digital regular. 


Ya sea que anime en papel o en computadora, comenzará con: 


arte lineal — colores —> sombreado © limpiar 


BFR ROR SE a a 
BP ROR ROS ow 


Por el artista invitado YAA 


Cada cuadro debe sombrearse individualmente desde cero. Este método puede parecer mas rapido al principio, pero 


lleva bastante tiempo. Es pixelart de principio a fin. Eso es lo que lo diferencia del método tradicional. 
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Marcos limitados 


Dos fotogramas son lo mínimo. Desafortunadamente, no podemos tener arcos ni formas de mostrar cómo 
van las cosas de A a B. La animación simplemente parpadeará. Podemos aprender de esto que 


necesitamos al menos un tercer marco, un desglose para mostrar la dirección o el arco. 


Debe transmitir la mayor cantidad de movimiento con la menor cantidad de dibujos. Esta es la verdadera dificultad. 


Estos son útiles para incluir una animación limitada pero agradable,además de las poses básicas de fotogramas clave: 


un fuerte fotograma clave deanticipación un si es posible:una averia, un "punto medio" 


excedersemarco para movimientos ágiles exactosiluetasque representan la acción. 


El siguiente consejo está inspirado en Mariel Cartwright (@kinucakes) 


OS 


— 


HAG $ 

por Michafrar 
La cantidad mínima de fotogramas para En lugar de ir y venir, puede Las acciones superpuestas también se 
un bucle convincente a es3 marcos. colocar objetos en un círculo pueden reducir a 3 fotogramas 


Este mínimo incluso funciona para animaciones de 
ejecución. Puedes tener un bucle de 3 fotogramas 


donde las piernas son intercambiables. 


2 
Metroide (NES) 


$. $. $. $. También puede tener 4 marcos donde se 
dl reutiliza uno de los marcos (generalmente 
un desglose). De esta manera 
1 2 3 2 3 


1 - R 
3 1 2 3 1 2 la animación puede retroceder. 


por Michafrar 


Castlevania III (NES) Cuentos de pato (NES) 


¡Incluso con limitaciones estrictas, puede ser 
muy expresivo con animaciones en bucle! 
Maestro del tesoro (NES) 
¿Tiene algún problema con los ciclos de caminata? 


Haz que un personaje atraviese la pantalla en lugar de que camine en su 


lugar. Mantenga un registro de dónde el pie tiene contacto con el suelo. 


232 U terminaste, vuelve a colocar los marcos en el medio. 


La piel de cebolla 
La herramienta Papel de cebolla te muestra los fotogramas anteriores y siguientes, 


ayudándote a dibujar los intermedios, pero con el arte de píxeles hay un problema. 


a y li 
Pts 

i 
-i 


ae 


se: 


Marcos más juntos 
Encender la piel de cebolla se convierte en 


un gran lío cuando tienes muchos colores. 
Te 
a = 


Buena suerte con eso... 


Marcos espaciados 
La herramienta de piel de cebolla solo funciona bien 
para el arte lineal y para aproximar los intermedios. 


piel de cebolla en el medio 
Si tiene suerte, su contorno puede estar en el medio sin muchas 


Marco B 
molestias como esta: si no usa lineart para hacer animaciones de 


Marco A 


a a , J 
EEEE F 
Puede encontrar un botón de piel de cebolla en la mayoría de los programas de animación. Algunos programas pueden llamarlo "mesa de luz". 
qm O 


pixel art, entonces la piel de cebolla no siempre es útil. 


aseprita 


GALE | + | - 
GráficosGale Onion Skin | 


No hace falta decirlo: presta atención a cómo usas la piel de 
cebolla. Vamos a subpixelar esta forma de paraguas hacia abajo 


e Light Table fc 


movimiento profesional 


Esta piel de cebolla te dasuficiente informaciónpara dibujar un 


intermedio. Desafortunadamente, es una forma engañosa. 


Literalmente no puedes dibujar entre líneas., como con la 
animación tradicional. Hay poco o ningún espacio para hacer eso. 


La mejor solución espara favorecer(para acercarse) el fotograma clave 


para que tus intermedios mantengan la forma. 


línea de ebullición 


X 


Rakugakids (N64) 


OOOO, 


La ebullición es el efecto de bamboleo de las líneas dibujadas a mano.Esto es a menudo el resultado de dibujos 
de píxeles cuadro por cuadro. Con tantos píxeles muy juntos, es probable que algunos de ellos se muevan. 


La ebullición es inevitable con el arte tradicional, pero se puede evitar con las artes digitales. 


Causas: 
ri eee! 
yo “i 
y! 
pie 
I 
y! 
od 
Los intermedios favorecen el marco equivocado. El movimiento no sigue un arco Subpixeling (si se usa) no esta bien alineado. 
Posibilidades: 


+ Utilice la herramienta de selección tanto como sea posible. Deslice las piezas alrededor. 

+ Use Subpixeling para asegurarse de que los marcos transicionen sin problemas con espacios intermedios ajustados. 

* Sea económico, utilice animación limitada. Sin embargo, el riesgo que corre es tener una animación entrecortada. Algunos artistas y 
audiencias encuentran que el arte de píxeles de alta velocidad de fotogramas es demasiado estéril, demasiado limpio. Encuentre un 


buen equilibrio entre las antiguas limitaciones y las posibilidades modernas. No tienes que adherirte a nada. 


MM = 


Ciertos juegos intentan imitar el estilo dibujado a mano, juegos 
comoSMWz2; Isla de Yoshi (SNESy Ragukakids (N64). Estos juegos : + 
tienen la intención de hervir la línea, simplemente imitan la 

animación inestable. Sin embargo/a isla de yoshsolo utiliza la 


YAT EA 
técnica para fondos y objetos. Los sprites de personajes y enemigos HA 


se animan sin hervir líneas. 


La ebullición de la línea es particularmente notable cuando los personajes se vuelven 
a dibujar para cada cuadro aunque estén parados. Con el arte tradicional, a menudo 
se usa como un efecto estilístico popular. Con pixelart, no se traduce bien porque 


tiene una resolución baja, por lo que queda poco espacio para hervir. 


Un cuadro impar puede estropear la animación. 


línea de ebullición* limpiado* 


Street Fig hter III (Arcade) * Este ejemplo está estrictamente animado. Revisa el anexo para verlo. 
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Desplazamiento de paralaje 


Para agregar más profundidad, puede usar la perspectiva para el fondo o usar el desplazamiento de paralaje: 


dividiendo su fondo en capas y moviéndolo a diferentes velocidades: 


Elmás cercaun trozo de paisaje es, elmás rápido se mueve. El 
más lejoses elmás lento se mueve. Los cielos u objetos muy 
distantes como el sol, la luna, las estrellas y las montañas rara 


vez se mueven. 


¡El paisaje se mueve como en un paseo en coche! 


Hay 3 tipos distintivos de desplazamiento de paralaje que dan 3 efectos únicos. 


Following Travelling Revolving 


Todas las capas se mueven en la misma dirección, Las capas se mueven en direcciones Los bucles de fondo, el frente es 


pero se mueven a diferentes velocidades. opuestas La escena hace que la cámara gire. cuadro por cuadro - la cámara gira 


aaa (PS1) Ninja Gaiden (NES) Mickey Manía (Megadrive) 
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Vistas de arriba hacia abajo 


Parallax Scrolling no es solo para usuarios de desplazamiento lateral. Se pueden usar fácilmente en vistas de arriba hacia 


abajo como en La leyenda de Zelda: Minish Cap (GBA). Observe cómo la brizna de hierba viaja sobre la hoja. 


Los fondos se pueden estirar y sesgar para crear 
perspectiva. Cada línea de exploración de píxeles 
se mueve a diferentes velocidadescon la ayuda 


del código de programación. 


Street Fighter II Turbo (SNES) 


Concéntrate en el fondo distante mientras el personaje nada. Observe cómo las vigas de madera se mueven hacia abajo. 


Para lograr este efecto, los artistas crearon tanto el piso como 
el techo de las vigas en un solo activo. El haz se estira a medida 
que el personaje sube y baja, revelando ambos lados. 


Donkey Kong Country 2: Diddy's Kong Quest (SNES) 


Si desea conocer estas técnicas de codificación, mire los videos en Game Hut. Jon Burton, 


director de Traveller's Tales, revela allí todos sus trucos de programación. [A C] m ERU T. 


http://www.gamehut.com/ 
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Conclusión 


Para algunos, pixel art es sinónimo de animación. Para otros, es sinónimo de ilustraciones. 


Ya sea que animes o no, piensa en esto: 


Animar es una habilidad transferible. 
Esto significa que es una habilidad que se puede aplicar en otros campos. Es una habilidad muy valiosa para saber si desea crear 
videos, juegos de computadora o simplemente quiere avanzar en su carrera. tu notengo queSobresalga en la animación per se, 


¡pero aprenderla le enseñará algunos trucos geniales que puede aplicar en otros lugares! 


La animación también es un tema expansivo. 
Por mucho que este capítulo pueda cubrir el tema, ¡un libro simplemente no es suficiente! Es un tema diverso y complejo con sus 
propios métodos. Hasta el día de hoy, los artistas continúan escribiendo sobre él, discutiéndolo y estableciendo nuevos estilos. La 
animación de pixel art es un subgénero tanto del arte como de la animación. ¡Requiere que combine su conocimiento de cada uno, por 


lo que es valioso para su propio crecimiento artístico aprender sobre los fundamentos de la animación en general! 


Lo más importante, diviértete. Animar es un trabajo duro, ¡pero 


puede ser muy satisfactorio cuando ves que las cosas cobran vida! 


AREAS 


Héroes guardianes avanzados (GBA) 


Comida para el pensamiento Técnicas clave Conceptos de animación 
Introducción Aplastar y estirar Los cuatro métodos 
Como estudiar Anticipación Animación de silueta 


Marcos de reciclaje 


Líneas de tiempo en pixel art Desg lose 


Empezar desde lo tradicional 


Facilidad de entrada y salida Lineal simple 


frotis Marcos limitados 
sobreimpulsos La piel de cebolla 


Superposición y seguimiento Desplazamiento de paralajeamo 237 


Después de escribir este libro de forma intermitente durante los últimos cuatro años, es difícil encontrar buenas palabras para 
cerrarlo. Pixel art es una armonía de representación pintada y escultura precisa. La característica definitoria de esta forma de arte es y 
siempre será la precisión y el control que aporta a sus obras de arte. Esto es lo que lo convierte en un medio y no en un estilo. A estas 


alturas, muchos de ustedes ya saben esto. 


Saber dibujar es un requisito. Es una habilidad que necesitas dominar un poco antes de aprender otras 
nuevas. Para correr, primero debes aprender a caminar; A viene antes que B. A los animadores se les dice que 
el dibujo es una habilidad fundamental. Los artistas de píxeles necesitan que se les diga lo mismo. El arte de los 
píxeles no es nada sin un buen sentido de la ilustración y la pintura. Para ser un artista de píxeles competente, 
debe ser bueno dibujando o pintando. La mayoría de las veces, si algo no se ve del todo bien con tus sprites, lo 
más probable es que la causa esté relacionada con el dibujo. Habría incluido este párrafo al principio del libro, 
pero me han dicho que este consejo puede ser bastante desalentador para los recién llegados. Sin embargo, 
creo que es un discurso necesario para los recién llegados, a pesar de lo duro que pueda sonar para los no 


artistas que realmente quieren probar el pixel art. 


El pixel art encuentra sus raíces en los videojuegos. Como resultado, la mayoría de los sprites presentados en esta guía sirvieron como 
referencia, estudio y análisis. Te recomiendo encarecidamente que hagas lo mismo. De hecho, los insto a estudiar y 
aprender de los videojuegos y de los artistas que trabajaron para ellos. Es fácil navegar por el arte en línea y 
encontrar un solo artista que crea imágenes magníficas. Pero no deberías estudiar estrictamente solo de ella/él. Estos 
artistas tienen sus propias inspiraciones. Vale la pena echar un vistazo a lo que les enseñó el arte de píxeles. Si 
simplemente estudias la interpretación de un artista, no entenderás cómo llegó allí. Tu trabajo terminará siendo una 
imitación de una imitación, si eso es todo lo que sabes. Todavía puedes tener tu artista favorito, pero siempre trata 


de estar atento a más artistas y más juegos. 


Por último, este libro no tiene ejercicios, ya que el arte es una habilidad productiva. Es difícil evaluar tu trabajo sin una 
comunidad o una clase. Si quieres entrenar, depende de ti encontrar lo que te inspira e incorporar algunos elementos nuevos en tu 
obra de arte. Cualquier cosa de la que no se haya hablado en este libro es específica de otras formas de arte (texturas, sombreado) 
o desarrollo de videojuegos (conjuntos de mosaicos, implementación de motores, etc.). Depende de usted continuar su viaje y 


encontrar más recursos y tutoriales. 


Mantente curioso. Una vez que te encuentres con Pixelart que te parezca interesante, guárdalo y ¡AMPLÉALO! 
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Artistas invitados 


$ anubis jr. 
Twitter: @Anubis_Jr 
Sitio web: anubis-works.tumblr.com 


Glauber Kotaki 


Twitter: @unseven 


Sitio web: www.glauberkotaki.com 


Pablo Veer 


Twitter: Opietepiet 


Sitio web: pietepiet.com 


Dani Oliver 


Twitter: @ahruon 


Sitio web: ahruon.tumblr.com 


ellián 
Twitter: OThisIsEllian 


Sitio web: thisisellian.com 


Genios 
Instagram: jinpixel 


Sitio web: http://jinn.art.br/ 


justin cyr 


Twitter: @JUSTIN_CYR 


Sitio web: justinpaulcyr.tumblr.com 


Steven McCarthy 


Twitter: @1988StevenM 


Sitio web: 1988stevenm.carbonmade.com/ 


Muchas gracias a 


The Spriters Resource 


www.spriters-resource.com 


Temmie Chang 


Twitter: @tuyoki 


Sitio web: temmiechang.tumblr.com 


Jenna Brown 


Twitter: @cyanatar 


Sitio web: www.cyanatar.com 


cocefi 


Twitter: @chickysprout 


Sitio web: pixosprout.tumblr.com 


Neorice 


Twitter: ONeoriceisgood 


Sitio web: neorice.com 


Siosa 


Twitter: @syOsa 


Sitio web: collet66.blog52.fc2.com 


Thernz 


Twitter: @thernz 


Sitio web: thernz.tumblr.com 


YAA 


Twitter: y_a_a_m_m_y 


Sitio web: http://yaa-tum.tumblr.com/ 


shawn martins 


e 


Twitter: @puppiesandanime a 


Sitio web: puppiesandanime.tumblr.com/portfolio 


Un archivo en línea que cataloga sprites y fondos de videojuegos. este sitio web es 
donde comencé como un joven artista de píxeles novato. ¡Gracias a Mark Brown (GMT), 


Dazz (Daniel Brown), Shane Gill (DYKG) y a todos los que trabajaron en el sitio web! 
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Bibliografía seleccionada 

Revista: “MegaForce #4” enero-febrero de 1992, páginas 31-34, publicado por Mega Press, SARL 

Libro: Especificación de hardware Neo-Geo" folleto, pagina 93, emitido por SNK Playmore Corporation 

Video 95 —=7 2347 INEYAR 

ESTE %57 tA (ED en http://p.twipple.jp/mznVY 

Imágenes de video: Documental de SEGA1993 Parte II, en youtu.be/-M8RIc6Ek0Q 

Imágenes de vídeo: Furia fatal 3Neo Geo CD - Comercial promocional —Paul Signac Entrada del puerto de Marsella (1911) —Pixel Works de Susan Kare (1984) Iwata 
pregunta: The Legend of Zelda: A Link Between Worlds-en http://iwataasks.nintendo.com/interviews/#/3ds/a-link- between-worlds/0/3 Fotografía, de Seymour Road 
Studios—Imágenes de "His Girl Friday" de 1940, O Columbia Pictures 

Detrás de escena en Sega: Cómo se hizo un videojuego de Nicholas Lavroff—Shiny Entertainment - Earthworm Jim "The Making Of" 


Documental: toco toco - Akira “Akiman"Yasuda, Illustrator-en https://www.youtube.com/watch?v=RxIXilYvOkM 


informacion registrada 


El ventilador funciona 
Página 7: Diseño Penguin O Nintendo - Página 9: Venusaur O The Pokémon Company, Game Freak, Nintendo Co. ; Yoko Littner O Gainax; Terciopelo, esfera de Odín O Vanillaware 
- Página 18: Space Invaders O Taito Corporation - Página 40: Metaknight O Nintendo Co., Hal Labs. - Página 50: Rosalina O Nintendo Co. - Página 65: Shovel Knight, Shield Knight O Yacht Club Games 


- Página 91: F-zero, Captain falcon O Nintendo Co. - Página 96+181: Shulk, Xenoblade Chronicles O Monolith Soft, Nintendo Co. - Página 181: Inkling, Splatoon O Nintendo; 


Obras autenticas 

Página 11: Felicia O Capcom; ilustrado por Akira “Akiman”Yasuda - Página 12: Comix Zone © Sega - Página 20, 30: Metroid II: Return of Samus, Super Metroid © Nintendo Co.; Cave Story © Studio Pixel, Nicalis, Inc. - Página 
21: Finn, Adventure Time O The Cartoon Network, Inc. D3 Publisher Inc. ; Héroe de medio minuto © Marvelous Entertainment Inc. 

Capítulo 1-Páginas 22, 24: Sakura, Street Fighter © Capcom - Páginas 23, 24: Earthbound, Mother 2, Mother 3 O Shigesato Itoi, Nintendo Co.; Heihachi, Tekken © Bandai Namco Entertainment Inc. - Página 24: Treecko O The 
Pokémon Company, Game Freak, Nintendo Co. - Página 27: Metal Slug O SNK, SNK Corporation - Página 28: Tuna head O Nippon Ichi Software, Inc.; Curses 'N Chaos O Tribute Games - Página 30: Super Mario Brothers, 
Mario & Luigi, Metroid © Nintendo Co., Sonic The Hedgehog, Streets of Rage © Sega; Castlevania © Konami - Página 31: Shatterhand © Jaleco, Natsume ; Ganon, Bowser, Wario, Mother 3tm © Nintendo Co.; Shonen Jump: 
Jump Ultimate Stars ONintendo, Gambarion; Una pieza O Eiichiro Oda; Scott Pilgrim contra el mundo: El juego O Ubisoft; Shovel Knight O Yacht Club Games - Página 32: Wario Land 4, Princess Peach O Nintendo Co.; Kirby 
Squeak Squad O Nintendo Co., Hal Labs. ; Mágico Taruruuto-Kun OTatsuya Egawa, Shueisha; Gatillo crono O Square-Enix; Boktai 30 Konami; Riviera: La tierra prometida O STING - Página 33: Las aventuras de Batman y 
Robin © Warner Bros., Konami; Encantado GBA © Disney Interactive; Alcaparra del Congo O Data East ; Hamelin Sin violin Damaki ©Enix; Funky Kong, Metroid Fusion © Nintendo Co.; Castlevania© Konami; Mundo de 
monstruos O Sega; Dragon Quest, limo O Square-Enix; Sam & Max © Steve Purcell - Página 34: Ristar © Sega; Pulseman© Game Freak, Sega; AlundraO Matrix Software; Parodio © Konami; The Legend of Zelda, Link, Goron, 
Samus, Metroid: Zero Mission O Nintendo Co.; Hsien-Ko, Darkstalkers O Capcom; Shantae O Wayforward technologies - Página 35: Lanturn, Mawile, Dugtrio, Muk, Pokémon Diamante/Perla/Platino O The Pokémon 


Company, Game Freak, Nintendo Co. - Página 36: Klonoa, Kos-Mos, Xeno-saga O Namco Bandai; Hagar, Final Fight, Street Fighter, Chun-li, Zangief O Capcom 


Capitulo 2-Página 38: Kirby O Nintendo Co., Hal Labs. - Página 39: Starfox 2, Fox McCloud O Nintendo Co. - Página 40: Scribblenauts O Warner Bros. - Página 41: King Dedede, Kirby O Nintendo Co., Hal Labs. ; Unown O The 
Pokémon Company, Game Freak, Nintendo Co.; Fat Fury O SNK - Página 42: Rhythm Tengoku O Nintendo Co. ; Metal Gear, Solid Snake, Mei-ling OKonami; Fuka Kazamatsuri O Nippon Ichi Software, Atlus - Página 43: 
Advance Wars, Andy O Intelligent Systems, Nintendo Co.; Yoshi, Yoshi's Island, Super Mario O Nintendo Co. - Página 46: Donovan Baine, Hsien-Ko, Darkstalkers © Capcom - Página 48: Kirby © Nintendo Co., Hal Labs. ; Lan, 
Mega Man Battle Chip Challenge O Capcom - Página 52: ¡Negima! O Ken Akamatsu, Kodansha; Jon Talbain, Darkstalkers O Capcom - Página 53: Breath of Fire O Capcom - Página 54: Earthworm Jim O Doug TenNapel; Laharl 
O Nippon Ichi Software - Página 55: El pequeño Nemo, maestro de los sueños O Capcom, Bill Murray como Peter Venkman, Ghostbusters Genesis O Sega - Página 57: Dragon Quest/ Dragon Warrior O Square-Enix - Página 
59: Shining Force O Sega 

Capítulo 3-Página 60-85: Pokémon Heart Gold ©The Pokémon Company, Game Freak, Nintendo Co. - Página 61: Batman O DC Comics, Warner Bros, Sunsoft; Shin Megami Tensei© Atlus; Megaman 6, Tierra Roja, Aliento de 
Fuego IV © Capcom; Super Metroid, Yoshi © Nintendo Co.; Tales of Phantasia O Namco Bandai - Página 62: Drawn to Life O THQ; Shovel Knight © Juegos del club náutico; Mighty Switch Force OWayforward Technologies - 
Página 68: Sonic Rush Adventure, Sonic 3 O Sega, Sonic Team; Seiken Densetsu 3 O Square-Enix; Poderoso Gunvolt O Inti Creates; Coropata O Lukplus - Página 71: Tentacruel O The Pokémon Company, Game Freak, 
Nintendo Co. - Página 72: Lyndis, dardo, Fire Emblem © Intelligent Systems, Nintendo Co.; Dr. Wily, Protoman, Megaman 7, Breath of Fire IV O Capcom; Bowser, Mario Party Advance, Link, The Legend of Zelda Link to the 
Past, Luigi, Mario & Luigi Dream team, Yoshi y juegos de Mario relacionados O Nintendo Co.; Encadenado, Ness © Shigesato Itoi, Nintendo Co.; Mago, Rana, Chrono Trigger © Square-Enix. - Página 73 -74: Lenora, Elesa, 
Grimsley, Shauntal, Pokémon Black 8: White, Ditto, Pokémon Crystal © The Pokémon Company, Game Freak, Nintendo Co. - Página 74: The Chaos Engine O The Bitmap Brothers; Boktai: El sol está en tu mano O Konami - 
Página 79: Nuclear Throne O Vlambeer - Página 80: Double Dragon O Technós Japan, Arc System Works 

Capítulo 4-Paginas 87-88: Agahnim, The Legend of Zelda, Link to the Past, Super Mario y juegos relacionados © Nintendo Co. - Páginas 89-90: Cryamore, Esmyrelda Maximus, Bliss Barson O NostalgiCO; Persona 4 Arena O Atlus; Guilty Gear XX © Arc System Works; El rey de los luchadores XIII © SNK; Cuentos del 
destino © Namco Bandai; Disgaea, La Pucelle Tactics © Nippon Ichi Software - Página 91: Yoshi, Super Mario Kart © Nintendo Co. - Página 92 : Pokémon Red, Green, Blue © The Pokémon Company, Game Freak, Nintendo Co. Página 93: Chasm © Bit Kid , Inc - Página 94: Crash 'n' the boys y River City Ransom © 
Technos Japan; Buzzy beetle, Super Mario © Nintendo Co. - Pagina 96: Shulk, Xenoblade Chronicles © Monolith Soft, Nintendo Co. - Página 99-100: Beyond Oasis © Ancient, Sega; Ace Abogado, Shock Troopers © Capcom; Tales of the World © Namco Bandai - Página 101: Marty Mcfly, Doc Brown, Regreso al futuro I, 
Super Regreso al futuro 11 O Universal Pictures Inc. ; Castlevania: Aria of Sorrow, Castlevania: Dawn of Sorrow © Konami - Página 102: Lyndis, Fire Emblem O Intelligent Systems, Nintendo Co.; Riou, Suikoden II © Konami; Bowser, Super Mario © Nintendo Co. - Página 103,105: Streets of Rage © Sega; Duelyst © 
Counterplay Games, Bandai Namco; Abismo © Bit Kid, Inc - Página 104, 106, 107: Trono nuclear © Vlambeer; Super Mario World, Super Mario Brothers 3, Yoshi, Super Mario © Nintendo Co. - Página 108: Brendan, Pokémon Ruby, Sapphire, Emerald © The Pokémon Company, Game Freak, Nintendo Co. - Página 109: 
Tak: Mojo Mistake O THQ - Página 111: Kirby y The Amazing Mirror, Kirby, King Dedede O Nintendo. Co, Hal Labs.; Jewel Master © Sega - Página 113: Pokémon Rojo, Azul, Verde, Amarillo © The Pokémon Company, Game Freak, Nintendo Co. Regreso al futuro II, Súper Regreso al futuro I © Universal Pictures Inc. ; 
Castlevania: Aria of Sorrow, Castlevania: Dawn of Sorrow © Konami - Página 102: Lyndis, Fire Emblem © Intelligent Systems, Nintendo Co.; Riou, Suikoden II © Konami; Bowser, Super Mario © Nintendo Co. - Página 103,105: Streets of Rage © Sega; Duelyst © Counterplay Games, Bandai Namco; Abismo © Bit Kid, Inc - 
Página 104, 106, 107: Trono nuclear © Vlambeer; Super Mario World, Super Mario Brothers 3, Yoshi, Super Mario © Nintendo Co. - Página 108: Brendan, Pokémon Ruby, Sapphire, Emerald © The Pokémon Company, Game Freak, Nintendo Co. - Página 109: Tak: Mojo Mistake © THQ - Página 111: Kirby y The Amazing 
Mirror, Kirby, King Dedede © Nintendo. Co, Hal Labs.; Jewel Master © Sega - Página 113: Pokémon Rojo, Azul, Verde, Amarillo © The Pokémon Company, Game Freak, Nintendo Co. Regreso al futuro Il, Súper Regreso al futuro Il © Universal Pictures Inc. ; Castlevania: Aria of Sorrow, Castlevania: Dawn of Sorrow © Konami - Página 102: Lyndis 


Capítulo 5-Página 116: Street Fighter Alpha O Capcom - Página 117: Monster in My Pocket O Konami, Ultra Games - Página 118: Mario Tennis O Nintendo Co. - Página 119: Ecco the DolphinO Sega 


240 


Página 120: Pokémon Mystery Dungeon 3 O The Pokémon Company, Game Freak, Nintendo Co.; Earthworm Jim O Doug TenNapel; Sonic Advance 2 O Sega- Página 121: Vectorman O Sega - Página 121: 
Vectorman O Sega; Pato Donald O Disney Interactive; Scizor O The Pokémon Company, Game Freak, Nintendo Co. - Página 122: Beyond Oasis O Sega, Ancient; Earthworm Jim O Doug TenNapel; ecco el 

DolphinO Sega - Página 123: Kolibri © Sega, Appaloosa Interactive - Página 124: King Dedede, Acro © Nintendo Co., Hal Labs — Página 125: Shovel Knight O Yacht Club Games; La aventura de Kirby © Nintendo, 
Laboratorio HAL; Street fighter Alpha O Capcom - Página 126: Kunio-kun © Technós Japan; Crystalis O Corporación SNK; Cereza, Bayonetta O Sega, Platinum Games - Página 127: Super Mario World 2: Yoshi's 
Island © Nintendo - Página 128: Gengar, Nidorino © Game Freak, The Pokémon Company, Nintendo - Página 129: Space Racer © Loriciel Software — Página 131: Comix Zone © Sega ; Lombriz de tierra Jim © Doug 
TenNapel; Super Mario World © Nintendo - Página 132: Mega man O Capcom - Página 133: Lord Monarch © Nihon Falcom, Sega, Epoch Co., EMI Music Japan 

Capítulo 6-Página 128: The Legend of Zelda: The Minish cap O Nintendo — Página 140: Castlevania © Konami; Donkey Kong Country 3 O Nintendo; Shovel Knight O Juegos del club náutico; Megamanx © 

capcom; Ristar © Sega - Página 141: Mercs © Capcom ; Madre 3 © Shigesato Itoi, HAL Laboratory, Nintendo; Pocky y Rocky O Natsume Inc.; Advance Wars © Sistemas Inteligentes, Nintendo; La historia de Thor 

2 © Sega - Página 142: Los zombis se comieron a mis vecinos © Konami, LucasArts; Mario & Luigi: Superstar Saga O Nintendo, Alphadream; The Legend of Zelda: Un vínculo con el pasado © Nintendo; Goof Troop O Capcom, 

Disney Interactive — Página 143: The Legend of Zelda: Un vínculo con el pasado, The Legend of Zelda: The Minish Cap O Nintendo - Página 144: Twin Cobra II © Taito Corporation; Contra 3 O Konami; Línea Directa Miami © 

Devolver Digital — Página 146: Landstalker © Sega; Final Fantasy, Kingdom Hearts O Square-Enix Corporation; Harry Potter OWarner Bros. Solistice O Rare Ltd. - Página 147: Luminous Arc © Marvelous Inter- 

active Inc. Kingdom Hearts © Square-Enix Co, Ltd, Disney Interactive - Página 151: Final Fantasy © Square-Enix Corporation - Página 152: Earthbound © Shigesato Itoi, Nintendo, HAL Laboratory, Creatures Inc.; 
Boktai© Konami; Nox OWestwood Studios, EA Pacífico; SimCity (Nintendo) O Maxis, Nintendo, Electronic arts (marca) - Página 153: Earthbound © Shigesato Itoi, Nintendo, HAL Laboratory Double Dragon © 
Technos Japón, Arc System Works; Pacman © Bandai Namco - Página 154: Pokémon Negro/Blanco, Cynthia, Hilbert © Game Freak, The Pokémon Company, Nintendo; Ciberbots © Capcom; Furia fatal © SNK 
Corporation - Página 155: Indiana Jones y el destino de la Atlántida © LucasArts; Saga Frontier, Star Ocean, El mundo termina contigo © Square Enix Co., Ltd.; Contra © Konami - Página 156: The Legend of Zelda: A 
Link Between Worlds, Pokémoon Diamond Version © Nintendo - Página 157: Chrono Trigger O Square Enix Co., Ltd. - Página 159: Samus Aran, Kreid, Metroid, The Legend of Zelda: the Minish Cap, Super Mario 
Mundo 2: Yoshi's Island O Nintendo 

Capitulo 7-Página 161: Dudley, Street Fighter © Capcom; Versión Pokémon Black2 & White2 O Game Freak, The Pokémon Company, Nintendo; Rosalina, Super Mario © Nintendo- Pagina 164-165: Jojo's 

Aventura extraña O Hirohiko Araki, Shueisha Inc., Capcom; Zangief, Dudley, Street Fighter O Capcom- Página 166: Zero, X, Megaman X O Capcom; Sonic The Hedgehog O Sega- Página 167: Fire Emblem O 
Sistemas Inteligentes, Nintendo; Drawn to Life O THQ, 505 Games- Página 168: Pokémon Platinum Version, Charmeleon, Pikachu O Game Freak, The Pokémon Company, Nintendo- Página 169: Knuckles The 
Equidna O Sega; Pulseman © Game Freak, Sega- Página 170: Puyo Puyo, Puyo pop © Sega; Metal Gear Solid 3: Subsistencia O Konami- Página 172: Lemmings O Rockstar North Ltd.; Castlevania O Konami 

; Shin Megami Tensei © Atlus Co., Ltd. - Página 173: Esfera de Odin O Vanillaware, Atlus ; Madre 3 O Shigesato Itoi, HAL Laboratory, Nintendo; AlundraO Matrix Software, Sony Interactive Entertainment 

Inc.- Página 175-176: Captain Toad O Nintendo - Página 177: Pokémon HeartGold & Soul Silver version O Game Freak, The Pokémon Company, Nintendo- Página 180: Jackie Chan's action Kung Fu © Hudson 

Soft, Konami - Página 186: Drawn to Life © THQ, 505 Games 

Capítulo 8-Página 187-188: Metal Slug © SNK Corporation; Super Metroid, Samus Aran © Nintendo; Acechadores oscuros © Capcom; Toad O Nintendo - Páginas 189-190: Iconoclastas © Joakim Sandberg; Babosa Metálica 
Ataque © SNK Corporation; The Legend of Zelda: The Minish cap O Nintendo, Capcom; Sonic Mania © Sega- Página 193: Mario & Luigi: Superstar Saga © Nintendo, Alphadream; Braixen, Pokémon © Juego 

Freak, The Pokémon Company, Nintendo; Metal Slug O SNK Corporation- Página 195: Tingle, The Legend of Zelda © Nintendo; Chikorita, Pokémon O Game Freak, The Pokémon Company, Nintendo - Página 

196: The Legend of Zelda: Un vínculo con el pasado O Nintendo - Página 197: Darkstalkers O Capcom; Klonoa © Bandai Namco - Página 198: Iconoclastas © Joakim Sandberg; La leyenda de Zelda: La gorra Minish 
© Nintendo, - Página 199: Pikachu, Pokémon © Game Freak, The Pokémon Company, Nintendo — Página 200: Red Earth © Capcom - Página 201-203: King of Fighters, Metal Slug © SNK Corporation; Extraterrestre 
Infestación © Sega; Iconoclastas © Joakim Sandberg — Página 204: Darkstalkers O Capcom; Jojo's Bizarre Adventure © Hirohiko Araki, Shueisha Inc. — Página 205: Owlboy © D-pad Studios; Babosa Metálica © 
Corporación SNK; Hormigueo O Nintendo; Iconoclastas © Joakim Sandberg; Scot Pilgrim O Bryan Lee O'Malley; Zero, X, Mega man O Capcom - Página 206: Aladdin © Virgin Entertainement, Disney Interactive; 
Surco de guerra © Chucklefish Ltd.; Sonic The Hedgehog © Sega - Página 207: Diddy Kong © Nintendo; Street Fighter (Alex) O Capcom - Página 208: Samus Aran, Metroid O Nintendo; Poderosa fuerza de cambio © 
Tecnologías Wayforward; Iconoclastas © Joakim Sandberg - Página 209-210: Owlboy © D-pad Studios - Página 211: Fire Emblem O Intelligent Systems, Nintendo; Surco de guerra O Chucklefish Ltd.; Babosa Metálica © 
Corporación SNK 

Capítulo 9-Página 213: Castlevania, Richter Belmont O Konami - Página 215: Fire Emblem O Intelligent Systems, Nintendo;- Página 216: Super Mario, Super Mario Bros. 3 © Nintendo 

- Página 218-219: Darkstalkers © Capcom; Ataque masivo de Kirby © HAL Laboratory, Nintendo; Phantasy Star O Sega, Ace Abogado © Capcom; Castlevania, Richter Belmont, Alucard © Konami; Babosa Metálica © 
SNK Corporation - Página 220: Street Fighter, Makoto © Capcom; Iconoclastas © Joakim Sandberg - Página 221: Metal Slug Attack © SNK Corporation; Tierra roja O Capcom; Knuckles el Equidna © Sega, Sonic 
Equipo - Página 222: Owlboy © D-pad Studios; luchador callejero © Capcom; Maestros marciales © Andamiro Entertainment, International Games System Co., Ltd. ; Emblema de fuego © Intelligent Systems, Nintendo; Icono- 
oclastos © Joakim Sandberg ; Boogerman® Interplay Entertainment Corp; Mario & Luigi: Superstar Saga © Nintendo, Alphadream; Fuerza Dragón O Sega, J-Force; La Máscara O Black Pearl Software - Página 
223: Street Fighter, Karin, Hsien Ko, Darkstalkers O Capcom; Hulk, Mickey Mouse © Marvel, The Walt Disney Company; Wild Woody O Sega - Página 224-225: Owlboy O D-pad Studios; Ataque de babosas metálicas 
© Corporación SNK; Maestros marciales © Andamiro Entertainment, International Games System Co., Ltd. ; Planeta Libertad © GalaxyTrail; Poderosa fuerza de cambio OWayforward Technologies; - Página 226: Cero, X, 
Mega Man © Capcom; Batman NES © Sunsoft Corporation, Detective Comics; Ataque de babosas metálicas © SNK Corporation; - Página 228: Poderosa fuerza de cambio OWayforward Technologies; Ataque de babosas metálicas © SNK 
Corporation - Página 229: Wargroove O Chucklefish Ltd. - Página 230: Darkstalkers, Captain Commando, Street Fighter, Felicia, Chun-li, Ryu, Babyhead O Capcom; Earthworm Jim © Doug TenNapel - Página 
231: One Piece: Gran Coliseo Pirata O Eiichiro Oda, Bandai Namco, Arc System Works - Página 232: Metroid, Samus Aran O Nintendo; Simón Belmont, Castlevania © Konami; Ducktales NES O Capcom, El 
Compañía Walt Disney; Treasure Master © ASC Games - Página 233: Metal Slug © SNK Corporation - Página 234: Rakugakids © Konami; Super Mario World 2: Yoshi's Island © Nintendo; Luchador callejero, Chun-li © 
Capcom - Página 235: Rayman © Ubisoft Entertainment SA; Ninja Gaiden O Tecmo Co., Ltd.; Mickey Mania O The Walt Disney Company — Página 236: The Legend of Zelda: The Minish Cap, Donkey Kong Country 


2 © Nintendo; Street Fighter II © Capcom - Página 236: Advance Guardian Heroes O Treasure, Ubisoft 


Software (logotipo, mascotas y capturas de pantalla) 
Graphicsgale O Equilibrio humano-Microsoft Paint XP, Microsoft Paint Vista O Microsoft-Aseprite © David Capello-Pro Motion O Cosmigo- X< Y k'Y—JLSAI, herramienta de pintura fácil 


SAI O SYSTEMAX Desarrollo de Software-GIMP, programa de manipulación de imágenes GNU O El equipo de desarrollo de GIMP-Adobe Photoshop CS6, Adobe Flash O Sistemas de Adobe 
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¡Oh, no! Has llegado al final... 


PINEL @ LOGIC 


Gracias por leer. 


Esto marca el final delógica de píxeles. Cualquier actualización futura incluirá cambios menores. Si 
desea mantenerse actualizado sobre lo que sucede a continuación, visite pixellogicbook.com. 
Si tiene más preguntas, déjeme un correo electrónico a pixel.logic@outlook.com. 


Gracias por su paciencia y apoyo. Ahora... ¡es hora de ser creativo con los píxeles! 
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